Mutations: Creating Links

In this section, you’ll learn how you can send mutations with Apollo. It’s actually not that different from sending queries and follows the same three steps that were mentioned before, with a minor (but logical) difference in the third step:

  1. write the mutation as a JavaScript constant using the gql parser function
  2. use the graphql container to wrap your component with the mutation
  3. use the mutation function that gets injected into the component’s props

Preparing the React components

Like before, let’s start by writing the React component where users will be able to add new links.

This is a standard setup for a React component with two input fields where users can provide the url and description of the Link they want to create. The data that’s typed into these fields is stored in the component’s state and will be used in _createLink when the mutation is sent.

Writing the mutation

But how can you now actually send the mutation to your server? Let’s follow the three steps from before.

First you need to define the mutation in your JavaScript code and wrap your component with the graphql container. You’ll do that in a similar way as with the query before.

Let’s take a closer look again to understand what’s going on:

  1. You first create the JavaScript constant called POST_MUTATION that stores the mutation.
  2. Now you define the actual GraphQL mutation. It takes two arguments, url and description, that you’ll have to provide when invoking the mutation.
  3. Lastly, you’re using the graphql container to combine the CreateLink component with the POST_MUTATION. The specified name again refers to the name of the prop that’s injected into CreateLink. This time, a function will be injected that’s called postMutation and that you can invoke and pass in the required arguments.

Let’s see the mutation in action!

As promised, all you need to do is call the function that Apollo injects into CreateLink and pass the variables that represent the user input.

Now, run yarn start, you’ll see the following screen:

Two input fields and a submit-button - not very pretty but functional.

Enter some data into the fields, e.g.:

  • Description: The best learning resource for GraphQL
  • URL: www.howtographql.com

Then click the submit-button. You won’t get any visual feedback in the UI, but let’s see if the query actually worked by checking the current list of links in a Playground.

You can open a Playground again by navigating to http://localhost:4000 in your browser. Then send the following query:

# Try to write your query here
{
  feed {
    links {
      description
      url
    }
  }
}

You’ll see the following server response:

{
  "data": {
    "links": [
      // ...
      {
        "description": "The best learning resource for GraphQL",
        "url": "www.howtographql.com"
      }
    ]
  }
}

Awesome! The mutation works, great job! 💪

Unlock the next chapter
Which of the following statements is true?
Only queries can be wrapped with the 'graphql' higher-order component
'gql' is a higher-order component from the react-apollo package
When wrapping a component with a mutation using 'graphql', Apollo injects a function into the component's props
GraphQL mutations never take any arguments