react-query useMutation onError never firing

Question

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
  },
}

);

Answer 1

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
  },
})