I'm currently trying out react-query in my project.

I'm having trouble with handling errors within my mutation.

In my networks tab, I can confirm that the server is responding with code 400 or 500, which I assumed makes axios throw an error, thus firing the defined onError function.

However, the onSuccess function is always called no matter how the API call goes.

What am I missing here? Thanks in advance.

const { mutate } = useMutation(
['mutation'],
() => axios.patch(API_URL, params),
{
  onSuccess: () => {
    //this is always fired, even when response code is 400, 500, etc.
    void queryClient.invalidateQueries('query');
  },
  onError: () => {
    //should do something but never fired
  },
}

);

I'm currently trying out react-query in my project.

I'm having trouble with handling errors within my mutation.

In my networks tab, I can confirm that the server is responding with code 400 or 500, which I assumed makes axios throw an error, thus firing the defined onError function.

However, the onSuccess function is always called no matter how the API call goes.

What am I missing here? Thanks in advance.

const { mutate } = useMutation(
['mutation'],
() => axios.patch(API_URL, params),
{
  onSuccess: () => {
    //this is always fired, even when response code is 400, 500, etc.
    void queryClient.invalidateQueries('query');
  },
  onError: () => {
    //should do something but never fired
  },
}

);

• javascript
• reactjs
• typescript
• react-query
• mutation

• 3 your code looks right, and unless you have some axios interceptors somewhere, this should work. can you reproduce this in codesandbox? – TkDodo Commented Apr 15, 2022 at 18:52
• Did u solve this problem? I have same problem btw :// – Nightcrawler Commented Apr 17, 2022 at 18:02
• 1 props to @TkDodo, this was exactly the reason. I had forgotten that I set up an axios interceptor. – mymoto Commented May 7, 2022 at 9:26
• @mymoto did you get the issue? I am facing the same. – RAVI singh Commented Jun 10, 2022 at 9:01
• I'm having a similar issue. In my case I have onError defined before onSuccess and mine seems to be executing the onError behaviour AND the onSuccess behaviour. I can't work out why – Jon White Commented Jul 29, 2022 at 8:21

4 Answers 4

Make sure to return the result of your mutation function (i.e. the axios.patch call needs to be returned)

const { mutate } = useMutation(['mutation'], () => return axios.patch(API_URL, params),
{
  onSuccess: () => {
    //this is always fired, even when response code is 400, 500, etc.
    void queryClient.invalidateQueries('query');
  },
  onError: () => {
    //should do something but never fired
  },
})

Until the error es to the mutation, some promises might interfere with it. Example:

.catch((error) => {
   resolve(error.response) // Must be reject(error.response)
})

catch pipe should be removed or coded to reject the promise.

Any try-catch block, interceptors might handle the error. In that case, the error is not returned to the mutation.

A simple approach would be to manage the status code in the onSuccess callback. It's a bug in the useMutation which I am also facing so I manage the status code in conditionals. But it should work not work in case of 500. There is a flaw in your implementation then.

It might be because you're passing arguments in worng order. In docs it says you should call it as follows:

useMutation(mutationFn, {
   mutationKey,
   onError,
   onMutate,
   onSettled,
   onSuccess,
   retry,
   retryDelay,
   useErrorBoundary,
   meta,
 });

Which makes your code as follows:

useMutation(
() => axios.patch(API_URL, params),
{
  mutationKey: 'mutation',
  onSuccess: () => {
    //this is always fired, even when response code is 400, 500, etc.
    void queryClient.invalidateQueries('query');
  },
  onError: () => {
    //should do something but never fired
  },
}