如何处理突变 GraphQL 错误而不是 Apollo onError()

Question

Server side, I am throwing a 403 Forbidden, to manage access to an API call.

To catch the GraphQL error for a mutation, I've tried the following: (method #1 is working when catching errors for useQuery() )

const [m, { error }] = useMutation(MY_MUTATION);

if(error) {
    console.error('Error return #1');
}

try {
  await m({
    variables,
    onError: (e: ApolloError) => {
       console.error('Error return #2');
    }
  }).catch(e) {
     console.error('Error return #3');
  };
} catch (e) {
    console.error('Error return #4');
}

Instead, from my Apollo onError() , the following GraphQL errors are returned and the execution stops. It does not go into any of my mutation error handling attempts:

graphQLErrors:, Array [
  Object {
    "extensions": Object {
      "code": "FORBIDDEN",
      "response": Object {
        "error": "Forbidden",
        "message": "Access is denied.",
        "statusCode": 403,
      },
    },
    "message": "Access is denied.",
  },
]

If a similar GraphQL error is returned from useQuery() , it shows it using:

const { data, error, loading } = useQuery( MY_QUERY );

if(error) {
    console.error('Error return #1');
}

Answer 1

Based on useMutation documentation I believe mutate (or m ) function doesn't accept onError callback and you have to set it in useMutation options.

const [m, { error }] = useMutation(MY_MUTATION, {
  onError: (e: ApolloError) => {
     console.error('Error return #2');
  }
});

if (error) {
    console.error('Error return #1');
}

try {
  await m({
    variables
  })
} catch (e) {
    console.error('Error return #4');
}