react-query useMutation onError never firing

user_11065657 0
Viewed 1750

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

);

mutation react-query typescript reactjs javascript
1 Answers

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