onSuccess options of mutate is not called.

[moonkorea00]

Hey team,

I'm currently having a situation where the onSuccess within the mutate is not called.

The code to reproduce the same result is as following :

// SomeComponent.tsx
const { mutate, mutateAsync } = useSomeCustomHook();
const someFunction = () => {
    mutate(
      { id, body },
      { onSuccess() {
         console.log('onSuccess in component called.'); // onSuccess is not ran despite successful api call using mutate.
      },
        onError: (err)=>{
          console.log(err)
        }
      }
    );
  };
  
 // useSomeCustomHook.ts
const useSomeCustomHook = () => {
  const queryClient = useQueryClient();

  return useMutation(someMutationFn, {
    onSuccess() {
      queryClient.invalidateQueries('someQueryKey');
      console.log('onSuccess in custom hook called'); // the console log is called after successful api call.
    },
  });
};

// ...jsx
<div onClick={someFunction}>Click for mutation</div> 

the result i was expecting when 'someFunction' is called was :

"onSuccess in custom hook called"
"onSuccess in component called"

however, the output is :

"onSuccess in custom hook called"

when using mutateAsync like how it is used below, the expected results are logged :

//  SomeComponent.tsx
const { mutate, mutateAsync } = useSomeCustomHook();
const someFunction = async() => {
    await mutateAsync({ id: comments.id, postId });
    console.log('onSuccess in component called.');
  };
  
// ...jsx
<div onClick={someFunction}>Click for mutation</div> 

// "onSuccess in custom hook called"
// "onSuccess in component called"

To sum up, the onSuccess declared right after mutate is not ran despite a successful api call using mutate. Only the onSuccess of the custom hook is ran. No errors are caught running the functions.

My understanding is that the onSuccess option is not overrided. What might be the cause of the issue i'm facing?

[TkDodo]

https://tkdodo.eu/blog/mastering-mutations-in-react-query#some-callbacks-might-not-fire

[moonkorea00]

hey @TkDodo ,

thanks for the reply. I've noticed the condition for callbacks within mutate not possibly firing would be when the component unmounts before the mutation has finished, however, in this case there is no logic where the component unmounts. would there be other conditions or situations where callbacks in mutate that may not fire?

[TkDodo]

then you need to show that behaviour in a codesandbox reproduction please

[armtuk]

I'm seeing this behavior, but when the same mutation is called twice in parallel. I have one call that is used as a debounced save draft, and then a real save. If both get invoked simultaneously react query gets in a bad status, and the isLoading value is stuck "true".

[TkDodo]

the callback not firing is again expected. When you invoke mutate again, you create a brand new mutation. That means the old mutation effectively "unmounts" (even though your component does not), but we can only "observe" one mutation at any given time.

if you want callbacks to run in any case, you need to put them on useMutation, not on mutate.

and the isLoading value is stuck "true"

can you show a reproduction for that?

[evilPaprika]

I also have the same thing that onSuccess is not called if mutate is invoked in another place. That is really unfortunate.
However my isLoading is not stuck in my case.