How to avoid bubbling the error on onError

[tomtobac]

Hi there 👋

I have a hook that performs a mutation but it requires an API token to make a request. This mutation is called quite often and I was trying to avoid calling the API token endpoint every time unless it fails as the user has deleted the API key for example. The problem is that I'm trying to handle this logic on the onError handler of the mutation but looks like it's bubbling the error and I want to keep this logic in the hook.

I am using react-query v4.

const useChat = () => {
  const client = useClient();
  const { data: { apiKey } } = useQuery(['defaultAPIKey'], () => client.getAPIKey());

  const mutation = useMutation<void, Error, CustomParameters>({
    mutationFn: async (params) => { 
      /* 
       * perform the mutation with the apiKey 
       * if the mutation is called again, the apiKey call is "cached" and isn't invoked
       * */
    },
    onError: (error, variables) => {
      if (error.status == 401 && error.message == 'invalid api token') {
        await queryClient.invalidateQueries(['defaultAPIKey']);
        /* perform the mutation again */
        return false; // I was expecting to return false or something to let react-query that i handled the error properly (or something like that);
      } else {
        throw error; // bubble the error
      }
    };
  })

  return { ...mutation }
}

Is this possible?

[TkDodo]

onError is not a place to transform errors back to resolved stuff. The error has already happened, and you can perform side-effects for it.

What you want is to handle the promise inside the mutationFn and your stuff there

[tomtobac]

Thanks for answering @TkDodo 🙇

Do you mean by handling the error in the promise passed to mutationFn, right? and throwing it if doesn't work?

Maybe I'm a bit lost, but for this use case, how you will handle it? if the cache api key is invalid and you want to retry the mutation only once

Thanks!

[TkDodo]

if you return a resolved Promise from the QueryFunction, it will be seen as success. If you return a rejected Promise, it will be seen as an error and retries will be done.