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