The complete HoC workflow requires you to have the HoC Query method set up, too. Otherwise, you won't be able to see why this approach has some advantages over the other one.

So, if you have undone the Query HoC, you should insert the code again, in order to test the mutation HoC. You can also skip to the next section, where you will learn how to use the Mutation component.

Follow these instructions to set up the mutation HoC:

1. Import the compose method from the react-apollo package, as follows:

import { graphql, compose } from 'react-apollo';

2. Add the addPost mutation and parse it with graphql-tag:

const ADD_POST = gql`
  mutation addPost($post : PostInput!) {
    addPost(post : $post) {
      id
      text
      user {
        username
        avatar
      }
    }
  }
`;

3. We will adjust the way that the Feed class is exported. In the first HoC example, we had the graphql method, which sent the GraphQL query and inserted that response data into the underlying Feed component. Now, we will use the compose function of react-apollo, which takes a set of GraphQL queries, or mutations. These are run or passed as functions to the component. Add the following code to the bottom, and remove the old export statement:

const ADD_POST_MUTATION = graphql(ADD_POST, {
  name: 'addPost'
});

const GET_POSTS_QUERY = graphql(GET_POSTS, {
  props: ({ data: { loading, error, posts } }) => ({
    loading,
    posts,
    error
  })
});

export default compose(GET_POSTS_QUERY, ADD_POST_MUTATION)(Feed);

Instead of using the graphql method directly on the Feed component, we first save the mutation and query in two separate variables. The mutation takes a parameter, name, which says that the mutation can be run under the name addPost, inside of the Feed component. The query looks similar to the query that we used in the previous section. The compose method takes both variables and connects them with the Feed component. All of the queries are directly executed, if not specified differently. All mutations are passed as functions to the component to be run programmatically.

4. Our form works as expected. Every piece of text that you enter in the text area is saved to the state of the component. When submitting the form, we want to send the addPost mutation with the Apollo Client. The addPost function is available under the properties of the Feed component, as we specified it in the preceding code. When giving a variables object as a parameter, we can fill in our input fields in the mutation, as is expected by our GraphQL schema:

handleSubmit = (event) => {
  const self = this;
  event.preventDefault();
  const newPost = {
    text: this.state.postContent
  };
  this.props.addPost({ variables: { post: newPost }}).then(() => {
    self.setState((prevState) => ({
      postContent: ''
    }));
  });
}

The code looks very clean when using the HoC approach. We first parse all of the queries. Then, we define our class, including the render method, which we haven't touched at all. Finally, we define the two GraphQL requests that we are going to send, and export the constructed component. The code is very readable.

If you try to add a new post through the front end, you won't be able to see it immediately. The form will be empty, and everything will look as though it should have worked, but the new post will not be shown. This happens because the current state (or cache) of our component has not yet received the new post. The easiest way to test that everything has worked is to refresh the browser.

Of course, this is not the way that it should work. After the mutation has been sent, the new post should be directly visible in the feed. We will fix this after we have had a look at the second approach, which uses the Mutation component.