Is there a way to provide fallback onError handler, which doesn't get called when onError option is passed to mutate call?

[heejongahn]

First of all, thanks for the great lib.

I'm trying to provide default mutation error handler for my colleagues. Of course, there must be cases when the devs want to handle the error themselves and do not want the fallback handler, so I'd like to provide the default handler, yet make it work only when the dev did not provide the custom onError.

From documentation, I figured QueryClient is the way to achieve that.

So I configured my client as below to see how it works, triggered dummy mutation, and the messages logged just as expected.

const queryClient = new QueryClient({
  mutationCache: new MutationCache({
    onError: () => {
      console.log('FROM MUTATION CACHE');
    },
  }),
  defaultOptions: {
    mutations: {
      onError: () => {
        console.log('FROM GLOBAL HANDLER');
      },
    },
  },
});

const { mutate } = useMutation('abc', {
  mutationFn: (_: any) => {
    throw new Error('error');
  },
});

mutate();

// FROM MUTATION CACHE
// FROM GLOBAL HANDLER

When I passed onError option for useMutation, it also seemed fine. As I passed custom onError, the global handler did not get invoked.

const { mutate } = useMutation('abc', {
  mutationFn: (_: any) => {
    throw new Error('error');
  },
  onError: () => {
    console.log('FROM DEFINITION SITE');
  },
});

mutate();

// FROM MUTATION CACHE
// FROM DEFINITION SITE

However, when I passed onError inside mutate function parameter, something unexpected happened:

const { mutate } = useMutation('abc', {
  mutationFn: (_: any) => {
    throw new Error('error');
  },
});

mutate(null, {
  onError: () => {
    console.log('FROM CALL SITE');
  },
})

// FROM MUTATION CACHE 
// FROM GLOBAL HANDLER <-- 🤔
// FROM CALL SITE

Even though I passed (somewhat) custom onError, the global handler still got called. However, I'd like to only call global handler when neither definition site nor call site passed onError.

So my question is...

1. Is this (global handler being called on the last example) an intended behavior?
2. If so, is there any way to tell if both useMutation definition and mutate call did not passed onError option from global handler's point of view?

Thanks in advance!

[TkDodo]

Is this (global handler being called on the last example) an intended behavior?

Yes. There are basically 3 layers of callbacks:

1. The global callback on the cache: Will be invoked first, for every mutation.
2. The callback on useMutation
3. The callback on mutate

When you set the defaultOptions for mutations, you are setting the default value for 2. Since your last example only sets a callback for 3, but not for 2, the default handler for 2 is invoked.

The callbacks 2) and 3) have different use-cases, which I have outlined here: https://tkdodo.eu/blog/mastering-mutations-in-react-query#some-callbacks-might-not-fire

[heejongahn]

@TkDodo Thanks for the quick answer! I'm still curious about my second question.

As the behavior of the default handler I'm trying to provide is to simply show the API error message as toast, it seems to belong to 3 category. If react-query provided either

• a way to set default handler for 3, or
• a way to somehow figure if user passed onError on 3 position or not inside defaultOptions.mutation.onError handler logic

I guess I could make it work.

Unfortunately, neither of those exists for now AFAIU. Am I correct? If so, is react-query team open to PRs implementing either of those? I'm willing to try to tackle on this if the team agrees. (if you could point me where I should start that would be awesome)

Thanks again in advance.

[TkDodo]

As the behavior of the default handler I'm trying to provide is to simply show the API error message as toast

To me, this belongs to 1 - the cache level callback: https://tkdodo.eu/blog/react-query-error-handling#showing-error-notifications

[heejongahn]

I agree, but I still need to provide a way to conditinally suppress the default behavior. (e.g. the dev might want to show the error message as a form help text, not a toast message.)

Can I ask what's your recommendation for achieving that? Using pre-defined variable for that purpose and check that condition before triggering comes to my mind (such as code below), but I'd be happy to hear if there's better suggestion.

const mutationCache = new MutationCache({
  onError: (error, varaibles) => {
    if (variables.SKIP_DEFAULT_ERROR_HANDLER) {
      return;
    }

    showToast(error);
  }
})

[TkDodo]

You can use the meta field on the mutation to pass arbitrary data through.

[heejongahn]

I see. Thanks again for your answers!