useMutation's Error isn't handled by global onError

[rockfight]

I am using onError from @apollo/client/link/error and handling error globally. It works as intended for useQuery. But for useMutation if I don't use onError inside the useMutation I get error Unhandled Rejection (Error): although the global onError is executed. Is this the normal behaviour ? I want to handle all error globally and not on every useMutation.

[ying-rao]

I stumbled on this issue as well. Need to wrap all the usage with try/catch so that the app doesn't crash. Hope this will be resolved soon.

[calypsow777]

Still a problem with the following version: "@apollo/client": "^3.3.13",

The documentation also says to set response.errors to null in onError if we want to ignore errors, but the response object is undefined when using mutations. https://www.apollographql.com/docs/react/data/error-handling/#ignoring-errors

[mathieuhasum]

I believe this exact problem was already mentioned and discussed here: https://github.com/apollographql/apollo-client/issues/6070

But strangely, the thread was closed without any explanation/solution. 😕

If I understand correctly, the issue is still present (despite the claim that it was fixed), and we are unsure if this is an expected behaviour or not.

One workaround is to ignore the errors globally... but it far from ideal as it will ignore all errors.

export default new ApolloClient({
  link,
  cache,
  defaultOptions: {
    mutate: { errorPolicy: 'ignore' },
  },
});

Another workaround is to manually pass a onError callback on every mutation to avoid crashing, again not ideal.

const [login, { data, loading, error }] = useLoginMutation({ onError: () => {} });

Personally, what we ended up doing with (for now) is to recreate a centralised error handling behaviour (like the error link) using a hook and passing it on each mutation.

const onError = useOnError();
const [login, { data, loading, error }] = useLoginMutation({ onError });

[moatorres]

What worked for me was adding the onError noop function suggested by @mathieuhasum inside the actual useMutation hook, like so:

export const useLogin = () =>
  useMutation(SIGNIN, {
    onError: () => {},
  })

Then I'd just call useLogin inside the consumer component, like so:

const [signIn, { data, error }] = useLogin()

The error is still accessible on the error prop, but it's not globally thrown.

[jdim]

Hi, are there any updates on that?

[clemente-xyz]

Hi. Any updates here? Still having the same error

[jerelmiller]

Hey all 👋. Thanks a bunch for your patience!

I would kindly ask if we can get a reproduction with some more details on the intended behavior you're expected to see. Reading through the issue description, it's not clear to me where that unhandled rejection error is coming from. Since calling the mutation returns a promise, my guess is this is coming from your call site.

A reproduction would really help clear up the ambiguity here. Thank you!

[stephenkiers]

I am more than happy to pair program to show you the issue in a project. Or do you have a sandbox somewhere (codepen, etc) that I can work off?

[jerelmiller]

@stephenkiers yes, our error template should be a decent starting place for you. You should be able to spin this up in codesandbox as well.

[github-actions[bot]]

We're closing this issue now but feel free to ping the maintainers or open a new issue if you still need support. Thank you!

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. For general questions, we recommend using StackOverflow or our discord server.