{error.message}
} else if (props) {
return Loading
}}
/>
)
}
```
That’s it! The app is now connected with the GraphQL server and ready to load some lovely pigs! 🐷🍦
**Running the App**
If you’re just running the app now, you’ll be disappointed that it throws some errors:
```
Failed to compile.
./src/App.js
Module not found: Can't resolve './__generated__/AppAllPostQuery.graphql' in '.../instagram/src'
```
That’s because we’ve skipped the compilation of the GraphQL code that makes for much of Relay’s actual power! You already installed the `relay-compiler`, so now you'll actually use it.
The compiler can be invoked using the `relay-compiler` command in the terminal where you have to provide two arguments:
1. `--src`: The path to all your files that contain `graphql` code
2. `--schema`: The path to your full GraphQL schema
You can get access to the full GraphQL schema by using a command line utility called [`get-graphql-schema`](https://github.com/graphcool/get-graphql-schema):
```shell
npm install -g get-graphql-schema
get-graphql-schema __RELAY_API_ENDPOINT__ > ./schema.graphql
```
> **Note**: `get-graphql-schema` has been deprecated in favor of the `graphql get-schema` command from the [GraphQL CLI](https://oss.prisma.io/content/GraphQL-CLI/01-Overview.html).
Again, you need to replace the placeholder `__RELAY_API_ENDPOINT__` with the actual endpoint of your Relay API. This command then downloads the schema and saves it in a file called `schema.graphql`.
> **ATTENTION:** There’s currently a [bug](https://github.com/facebook/relay/issues/1835) in the Relay Compiler that will produce an error if you download your schema like this. Until the bug is fixed, simply copy the schema from [here](http://graphqlbin.com/instagram-full.graphql) and put it into your project in a file called `schema.graphql`. The file needs to be on the same level as the `src` directory - not inside!
Now you can run the compiler:
```shell
relay-compiler --src ./src --schema ./schema.graphql
```
The `relay-compiler` will now scan all files in `src` and look for `graphql` code. It then takes this code and generates corresponding JavaScript representations for it (which again will be the input for the Babel compilation step). These JavaScript representations are stored in `./src/__generated__`.
Here’s what the output of the `relay-compiler` looks like in the terminal:
```
$ relay-compiler --src ./src --schema ./schema.graphql
HINT: pass --watch to keep watching for changes.
Parsed default in 0.11s
Writing default
Writer time: 0.48s [0.11s compiling, 0.37s generating, 0.00s extra]
Created:
- AppAllPostQuery.graphql.js
- Post_post.flow.js
- Post_post.graphql.js
- ListPage_viewer.flow.js
- ListPage_viewer.graphql.js
Unchanged: 0 files
Written default in 0.53s
```
You’ll also notice that the `__generated__` directory was now created and contains all the files that were generated by the compiler:
```
.
├── App.css
├── App.js
├── App.test.js
├── Environment.js
├── ListPage.js
├── Post.js
├── __generated__
│ ├── AppAllPostQuery.graphql.js
│ ├── ListPage_viewer.flow.js
│ ├── ListPage_viewer.graphql.js
│ ├── Post_post.flow.js
│ └── Post_post.graphql.js
├── index.css
├── index.js
├── logo.svg
└── registerServiceWorker.js.
├── App.css
├── App.js
├── App.test.js
├── Environment.js
├── ListPage.js
├── Post.js
├── __generated__
│ ├── AppAllPostQuery.graphql.js
│ ├── ListPage_viewer.flow.js
│ ├── ListPage_viewer.graphql.js
│ ├── Post_post.flow.js
│ └── Post_post.graphql.js
├── index.css
├── index.js
├── logo.svg
└── registerServiceWorker.js
```
Before you run the app to see if everything works, you should add actual post items to the database. Open a GraphQL Playground by pasting your endpoint for the Relay API into the address bar of a browser.
Once the Playground has opened, paste the following two mutations into the left pane:
```graphql
mutation ice {
createPost(
input: {
description: "Ice Cream!",
imageUrl: "https://s-media-cache-ak0.pinimg.com/originals/b9/ba/b9/b9bab9dcacb9efde92e015af07834473.png",
clientMutationId: ""
}
) {
post {
id
}
}
}
mutation howdy {
createPost(
input: {
description: "Howdy Partner",
imageUrl: "http://www.cutestpaw.com/wp-content/uploads/2015/09/s-Howdy-partner.jpeg",
clientMutationId: ""
}
) {
post {
id
}
}
}
```
Notice that you’ll have to switch the Playground mode from **Simple** to **Relay** for the mutations to work!
Then click the *Play*-button and select each of these mutations exactly once:
> **Note**: You can also use the Data Browser to add some post items.
All right, you now populated the database with some initial data.
Go ahead and run `yarn start` to see what the app currently looks like - you should now see the same two lovely pigs that you used as mock data before!
By the way, if you’re curios to see what the actual query looked like that the `QueryRenderer` composed for you and that was sent over to the server, you can inspect the *Networking*-tab of your browser's dev tools:
## 4. Adding and Deleting Posts [#4-adding-and-deleting-posts]
You’re done with the first part of the tutorial where we wanted to load and display the posts returned by the server.
Now you need to make sure that your users can also *add* new posts and *delete* existing ones!
For adding new posts, you’ll use a new *page* in the app. Create a new file in the `src` directory, call it `CreatePage.js` and add the following code:
```js
import React from 'react'
class CreatePage extends React.Component {
state = {
description: '',
imageUrl: '',
}
render() {
return (
this.setState({ description: e.target.value })}
/>
this.setState({ imageUrl: e.target.value })}
/>
{this.state.imageUrl && 
}
{this.state.description && this.state.imageUrl && (
)}
+ New Post
)
}
```
Also don’t forget to import the `Link` component on top of the same file:
```js
import { Link } from 'react-router'
```
Pressing the `Link` element in the app will now trigger the `CreatePage` to appear on the screen. You can run the app again and you should see everything as before, plus the **+ New Post**-button on the top right. Press it to convince yourself that it actually displays the `CreatePage` component:
### Creating new Posts [#creating-new-posts]
Now that you’ve got the routing set up, you can take care of the mutation. Mutations were one of the major pain points developers had with Relay Classic. The way how they’ve been implemented was in a declarative and powerful way. However, it was very difficult to actually understand how they worked since there was so much *magic* going on behind the scenes. As a result, the main concern was that they’re not predictible enough and developers had a hard time to reason about them.
That’s why one of the major goals of Relay Modern was also to introduce a new and more approachable mutation API. The Facebook team delivered that and Relay now exposes a more [*imperative* API](https://relay.dev/docs/en/mutations) that allows to manipulate the local store directly (actually, the manipulation happens through a dedicated *proxy* object, but it’s definitely much more direct than before).
To implement the mutation for adding new posts, create a new file called `CreatePostMutation.js` in `src` and paste the following code into it:
```jsx
// 1
import { commitMutation, graphql } from 'react-relay'
import { ConnectionHandler } from 'relay-runtime'
import environment from './Environment'
// 2
const mutation = graphql`
mutation CreatePostMutation($input: CreatePostInput!) {
createPost(input: $input) {
post {
id
description
imageUrl
}
}
}
`
// 3
export default (description, imageUrl, viewerId, callback) => {
// 4
const variables = {
input: {
description,
imageUrl,
clientMutationId: '',
},
}
// 5
commitMutation(environment, {
mutation,
variables,
// 6
optimisticUpdater: proxyStore => {
// ... you'll implement this in a bit
},
updater: proxyStore => {
// ... this as well
},
// 7
onCompleted: () => {
callback()
},
onError: err => console.error(err),
})
}
```
Let’s quickly walk through the different things that happen here:
1. First you need to import the right modules from `react-relay` as well as the `environment`.
2. Here you write a simple mutation and tag it with the `graphql` function.
3. The module exports a single function that takes in the post’s `description`, `imageUrl`, the `viewerId` and a `callback` that will be called when the mutation is completed.
4. Here you prepare the `input` object for the mutation that wraps the `description` and `imageUrl`. Note that the `clientMutationId` is required in this case because of a minor limitation in the Graphcool API - it has no function.
5. The `commitMutation` function can be used to send a mutation to the server with Relay Modern. You're passing the information that you prepared in the previous steps and execute the `callback` once the mutation is ready.
6. The `optimisticUpdater` and `updater` functions are part of the new imperative mutation API that allows to manipulate the Relay store through a proxy object. We'll discuss this in more detail in a bit.
7. Once the mutation is fully completed, the callback that the caller passed in is invoked.
### Using Relay’s New Imperative Store API [#using-relays-new-imperative-store-api]
Let’s quickly discuss the `optimisticUpdater` and `updater` functions that are teased here. The `proxyStore` that's being passed into them allows you to directly manipulate the cache with the changes you expect to happen through this mutation.
`optimisticUpdater` is triggered right after the mutation is sent (before the server response comes back) - it allows you to implement the *success scenario* of the mutation so that the user sees the effect of her mutation right away without having to wait for the server response.
`updater` is triggered when the actual server response comes back. If `optimisticUpdater` is implemented, then any changes that were introduced through it will be rolled back before updater is executed.
Here is how you implement them:
```js
optimisticUpdater: (proxyStore) => {
// 1 - create the `newPost` as a mock that can be added to the store
const id = 'client:newPost:' + tempID++
const newPost = proxyStore.create(id, 'Post')
newPost.setValue(id, 'id')
newPost.setValue(description, 'description')
newPost.setValue(imageUrl, 'imageUrl')
// 2 - add `newPost` to the store
const viewerProxy = proxyStore.get(viewerId)
const connection = ConnectionHandler.getConnection(viewerProxy, 'ListPage_allPosts')
if (connection) {
ConnectionHandler.insertEdgeAfter(connection, newPost)
}
},
updater: (proxyStore) => {
// 1 - retrieve the `newPost` from the server response
const createPostField = proxyStore.getRootField('createPost')
const newPost = createPostField.getLinkedRecord('post')
// 2 - add `newPost` to the store
const viewerProxy = proxyStore.get(viewerId)
const connection = ConnectionHandler.getConnection(viewerProxy, 'ListPage_allPosts')
if (connection) {
ConnectionHandler.insertEdgeAfter(connection, newPost)
}
},
```
Note that this code requires you to add a global variable called `tempID` into the file as well:
```js
let tempID = 0
```
Phew! There’s a lot of stuff going on, let’s tear it apart a bit. First notice that the second part of the both functions are completely identical! That’s because the `proxyStore` (your interface to manipulate the cache) doesn't care where the object that you're inserting comes from!
So, in `optimisticUpdater`, you're simply creating the `newPost` yourself based on the data (`description` and `imageUrl`) that is provided. However, for the `id`, you need to generate a new value for every post that's created and that will be the temporary ID of the post in the store until the actual one arrives from the server - that's why you introduce this `tempID` variable that gets incremented with every new post.
For the `updater` you can make use of the actual server response to update the cache. With `getRootField` and `getLinkedRecord` you get access to the payload of the mutation that you specified on top of the file:
Next you need to actually use this mutation in `CreatePage.js`. The only problem left right now is that in `CreatePage`, you don't have access to the `viewerId` at the moment - but it's a required argument for the mutation. At this point, you *could* use `react-router` and simply pass the `viewerId` from the `ListPage` on to the `CreatePage` component. However, we want to make proper use of Relay and each component should be responsible for its own data dependencies.
So, we’ll add another `QueryRenderer` for the `CreatePage` component where the `viewerId` can be fetched. Open `CreatePage.js` and update `render` as follows:
```js
render () {
return (
{this.props.viewer.allPosts.edges.map(({node}) =>
{error.message}
} else if (props) {
return (
// --- previous implementation ----
this.setState({description: e.target.value})}
/>
this.setState({imageUrl: e.target.value})}
/>
{this.state.imageUrl &&
}
{this.state.description && this.state.imageUrl &&
}
Loading
}}
/>
)
}
```
With this code, you’re effectively only wrapping the previous implementation of `CreatePage` in a `QueryRenderer` so you can request data from the server in here as well. You still need to define the `CreatePageViewerQuery` that is passed to the `QueryRenderer`. Put it on top of the file right after the imports:
```js
const CreatePageViewerQuery = graphql`
query CreatePageViewerQuery {
viewer {
id
}
}
`
```
Because you’re using this query, you get access to `viewer.id` in props of the component and can pass it along when the `onClick` function of the `button` is invoked.
You can now finally implement `_handlePost` as follows:
```js
_handlePost = viewerId => {
const { description, imageUrl } = this.state
CreatePostMutation(description, imageUrl, viewerId, () => this.props.router.replace('/'))
}
```
For that code work you also need to import the required dependencies and adjust the export statement. First add the following imports on the top of the file:
```js
import { withRouter } from 'react-router'
import CreatePostMutation from './CreatePostMutation'
import { QueryRenderer, graphql } from 'react-relay'
import environment from './Environment'
```
And finally replace the `export default CreatePage` at the bottom with the following:
```js
export default withRouter(CreatePage)
```
Before you’re running the app, you need to invoke the relay-compiler again:
```shell
relay-compiler --src ./src --schema ./schema.graphql
```
That’s it, you can now go ahead and add a new post through the UI of your app! How about these musical fellahs right here?
### Deleting Posts [#deleting-posts]
The last bit of functionality that’s still missing is the ability for the user to delete existing posts. Similar to the `CreatePostMutation`, the first thing you need to do is setup a new file called `DeletePostMutation.js` in `src` and type the following code into it:
```js
import {
commitMutation,
graphql,
} from 'react-relay'
import {ConnectionHandler} from 'relay-runtime'
import environment from './Environment'
const mutation = graphql`
mutation DeletePostMutation($input: DeletePostInput!) {
deletePost(input: $input) {
deletedId
}
}
`
export default (postId, viewerId) => {
const variables = {
input: {
id: postId,
clientMutationId: ""
},
}
commitMutation(
environment,
{
mutation,
variables,
onError: err => console.error(err),
optimisticUpdater: (proxyStore) => {
// ... you'll implement this in a bit
},
updater: (proxyStore) => {
// ... this as well
},
},
)
}
```
The approach you’re taking this time is very similar to the `CreatePost` mutation. First you import all dependencies, then you declare `the` mutation to be sent to the server and finally you export a function that takes the required arguments and calls `commitMutation`.
For now, open `Post.js` and implement `_handleDelete` as follows:
```js
_handleDelete = () => {
DeletePostMutation(this.props.post.id, null)
}
```
Also don’t forget to import the mutation on the top of the file:
```js
import DeletePostMutation from './DeletePostMutation'
```
Once more, invoke the `relay-compiler` and then run the app:
```shell
relay-compiler --src ./src --schema ./schema.graphql
yarn start
```
Deleting posts will now actually work, however, the UI doesn’t get updated. The posts only actually disappear after you refresh the page. Again, that’s precisely what Relay’s new imperative mutation API is for. In `optimisticUpdater` and `updater` you have to specify how you'd like Relay to update the cache after the mutation was performed.
Open `DeletePostMutation.js` again and implement them as follows:
```js
updater: (proxyStore) => {
const deletePostField = proxyStore.getRootField('deletePost')
const deletedId = deletePostField.getValue('deletedId')
const viewerProxy = proxyStore.get(viewerId)
const connection = ConnectionHandler.getConnection(viewerProxy, 'ListPage_allPosts')
if (connection) {
ConnectionHandler.deleteNode(connection, deletedId)
}
},
optimisticUpdater: (proxyStore) => {
const viewerProxy = proxyStore.get(viewerId)
const connection = ConnectionHandler.getConnection(viewerProxy, 'ListPage_allPosts')
if (connection) {
ConnectionHandler.deleteNode(connection, postId)
}
},
```
The `optimisticUpdater` and `updater` also work in the same ways as before - except that in the `optimisticUpdater` you have to do less work and don't have to create a temporary mocked post object. In the updater, you're accessing the `deletePost` and `deletedId` fields that you specified in the selection set of the mutation.
With this code, you’re telling Relay that you’d like to remove the deleted posts (identified by `deletedId` which is specified in the selection set of the mutation) from the `allPosts` connection.
You need to make a few more adjustments for this to work!
First you have to pass the `viewerId` as an argument when calling `DeletePostMutation` in `Post.js`. However, the `Post` component currently doesn't have access to it (i.e. it doesn't declare it as a *data dependency*).
You’ll have to add another fragment to the `Post` component. Open `Post.js` and update the export statement as follows:
```js
export default createFragmentContainer(
Post,
graphql`
fragment Post_viewer on Viewer {
id
}
fragment Post_post on Post {
id
description
imageUrl
}
`,
)
```
Now you can access a field called `viewer` with an `id` inside the props of the `Post` component. Use this when you're calling `DeletePostMutation` in `_handleDelete`:
```js
_handleDelete = () => {
DeletePostMutation(this.props.post.id, this.props.viewer.id)
}
```
For this new `Post_viewer` fragment to take effect, you need to also include it in the fragment container of `ListPage`. Open `ListPage.js` and update the export statement like so:
```js
export default createFragmentContainer(
ListPage,
graphql`
fragment ListPage_viewer on Viewer {
...Post_viewer
allPosts(last: 100, orderBy: createdAt_DESC) @connection(key: "ListPage_allPosts", filters: []) {
edges {
node {
...Post_post
}
}
}
}
`,
)
```
Now update the way how the `Post` components are created in `render`:
```jsx