How do I get MutationResult from higher order component created by graphql()

Question

React Apollo Mutations allow me to create a component that takes in a MutationResult with { data, loading, error } as a prop: https://www.apollographql.com/docs/react/api/react-apollo.html#mutation-render-prop

Now if I was to use the higher order component created by graphql()

function MyComponent({ mutate }) {
  return (
    <button onClick={() => {
      mutate({
        variables: { foo: 42 },
      });
    }}>
      Mutate
    </button>
  );
}

export default graphql(gql`mutation { ... }`)(MyComponent);

My component will only have mutate as a prop. How do I get { data, loading, error } into the component?

You can read it in the docs actually. It says that the mutate returns a Promise. So you can use .then to get the result from the mutation or .catch in case there was an error. In the case of the loading, you can do it with component state, calling setState({ loading: true}) before the mutate and setState({ loading: false}) after it. Hope it helps! — qmateub
@qmateub This is good information. You should write it as an answer. I will mark yours as the answer once I have verified it. — allenylzhou

Benjamin Charais Benjamin Charais · Accepted Answer · 2018-08-23T00:03:39

The Mutation is a promise, so you can receive the values inside of a then, and return them as needed. If you have async and await you can return the data and use await so you can have access to it in a synchronous style of code.

function MyComponent({ mutate, setState }) {
  return (
    <button onClick={() => 
      mutate({
        variables: { foo: 42 },
      }).then(data => {
        // Process your data as needed here:
        setState({ data });
      }).catch(err => console.error('Our Error: ', err);
    }>
      Mutate
    </button>
  );
}

export default graphql(gql`mutation { ... }`)(MyComponent);

How do I get MutationResult from higher order component created by graphql()

2 Answers