Mutation does not correctly pick up an error when it's run for the first time

[filipkrayem]

Hi, first of all, thank you for this awesome library.

If I run a mutation that throws an error, it doesn't get picked up the first time around. (Well it does, but only somewhere)
When I run the mutation and axios throws an error, it gets picked up correctly by the mutationCache and runs the handleErrors function (the function just shows notifications and doesn't do anything else). Notification gets shown, but when I console.log the mutation hook in my component, isError is false and error is null . After I run the mutation the second time (or any other number of times), the isError is correctly set to true and it works as intended. I believe this is not a problem with axios. The error code I'm getting is 400, but it's the same with 404 and I believe other error codes would result in the same thing.

Also if I run the mutation with correct data and get a success, I still need to have a failed mutation before it starts working properly.

So my guess is it's getting the data of the previous error instead of it's own error?

What am I doing wrong?

//This is the mutation hook 
export const useAddWorkspaceUser = () => {
  return useMutation(
    (data: { email: string; workspaceId: number }) => {
      return defaultMutationFn(`workspace/${data.workspaceId}/user`, { data: { email: data.email } });
    },
    {
      onSuccess: async (data, vars) => {
        queryClient.setQueryData([`workspace/${vars.workspaceId}`, vars.workspaceId], (old: any) => ({
          ...old,
          users: data.users,
        }));
        store.dispatch(showNotification({ message: "User successfully Added", severity: "success" }));
      },
    },
  );
};

export const defaultMutationFn = async (endpoint: string, options?: AxiosRequestConfig) => {
  const { data } = await axios({
    url: API_URL + "/" + endpoint,
    method: options?.method ?? "POST",
    ...options,
    ...defaultOptions,
  });
  return data;
};

const mutationCache = new MutationCache({
  onError: (err: any) => {
    handleErrors(err.response);
  },
});

[TkDodo]

that sounds weird. can you reproduce that in a codesandbox ?

[filipkrayem]

Yes. https://codesandbox.io/s/delicate-cache-ph37n?file=/src/index.js

[TkDodo]

sorry, I fail to understand this sandbox. I click the button and it logs the mutation as loading, then as error.

judging from this code:

    addWorkspaceUser.mutate({
      email: data.email,
      workspaceId: workspace.data.id
    });
    if (!addWorkspaceUser.isError) {
      console.log("no Error");
    }

I would guess that you would want addWorkspaceUser.isError to be set after you run the mutation? If that is the case - that is not how state management works in react in general. consider the following:

const [state, setState] = React.useState(1)

<button onClick={() => {
  setState(5)
  console.log(state)
}}>click</button>

here, the log will also log 1 and not 5, because setState just schedules a state setting - it doesn't do it synchronously. The same is true for react-query, as we use react state management under the hood.

What you can do is:

• use mutateAsync, and use the resolved or rejected promise to get data / error
• use the provided onError / onSuccess callbacks of mutate

but whatever you do - the data or error returned from useMutation (or useQuery for that matter) will always only reflect that state during render

[filipkrayem]

Oh, damn. such a rookie mistake 🤦‍♂️ Should have guessed this was the case. Thank you for your help 🙂