Apollo client mutation error handling

Question

I'm using GraphQL and mongoose on the server.

When a validation error occurs the GraphQL mutation sends a response with status code 200. On the client side the response looks like this:

I would like to get access to the validation error using the catch functionality of the apollo-client mutation promise. Something like:

      this.props.deleteProduct(this.state.selectedProductId).then(response => {
         // handle successful mutation
      }).catch(response => {
         const errors = response.errors; // does not work
         this.setState({ errorMessages: errors.map(error => error.message) });
      });

How can this be done?

Answer 1

The previous answer from @stubailo does not seem to cover all use cases. If I throw an error on my server side code the response code will be different than 200 and the error will be handled using .catch() and not using .then().

Link to the issue on GitHub.

The best is probably to handle the error on both .then() and .catch().

const { deleteProduct } = this.props;
const { selectedProductId } = this.state;

deleteProduct(selectedProductId)
  .then(res => {
      if (!res.errors) {
          // handle success
      } else {
          // handle errors with status code 200
      }
  })
  .catch(e => {
      // GraphQL errors can be extracted here
      if (e.graphQLErrors) {
          // reduce to get message
          _.reduce(
             e.graphQLErrors,
             (res, err) => [...res, error.message],
             []
          );
      }
   })