useMutation onSuccess only fired once

[ryanmk54]

In the options for useMutation onSuccess I see the following description:

onSuccess: (data: TData, variables: TVariables, context?: TContext) => Promise | void
Optional
This function will fire when the mutation is successful and will be passed the mutation's result.
If a promise is returned, it will be awaited and resolved before proceeding

In the options for mutate onSuccess I see this description

If you make multiple requests, onSuccess will fire only after the latest call you've made.

I was wondering if onSuccess would only fire after the latest call to useMutation regardless of if I put the onSuccess in useMutation, mutate, or in the then of mutateAsync?

I tested it out and it fires after every response from the server if onSuccess is in useMutation or if mutateAsync is used. The onSuccess in mutate is only fired after the latest call. Is this just a design limitation?

[TkDodo]

This is on purpose. the callbacks on .mutate are observer level callbacks, and if you call mutate twice, the first observer will unsubscribe, which means you'll only get data / error for the second call (there is only one mutation after all), and the callbacks will only be invoked for the last one. However, the callbacks on useMutation are cache-level callbacks, so they are always called, even if there is no observer.

You can read more about this here: https://tkdodo.eu/blog/mastering-mutations-in-react-query#some-callbacks-might-not-fire

[ryanmk54]

Thank you for your response. I read:

• https://tkdodo.eu/blog/mastering-mutations-in-react-query#some-callbacks-might-not-fire
• https://react-query.tanstack.com/guides/mutations#consecutive-mutations

I understand why the callbacks won't fire if the component is unmounted. This prevents the "Can't perform a React state update on an unmounted component" error I got before I used react-query.

The separate-concerns example helps to understand why onSuccess shouldn't be called more than once

const useUpdateTodo = () =>
  useMutation(updateTodo, {
    // ✅ always invalidate the todo list
    onSuccess: () => {
      queryClient.invalidateQueries(['todos', 'list'])
    },
  })

// in the component

const updateTodo = useUpdateTodo()
updateTodo.mutate(
  { title: 'newTitle' },
  // ✅ only redirect if we're still on the detail page
  // when the mutation finishes
  { onSuccess: () => history.push('/todos') }
)

We wouldn't want to go to a new page multiple times if the updateTodo button was pressed multiple times.

Do you have any more examples or use-cases where we only want the last callback to be called? It would help to solidify my understanding.

[TkDodo]

I understand why the callbacks won't fire if the component is unmounted. This prevents the "Can't perform a React state update on an unmounted component" error I got before I used react-query.

just FYI, this warning is a false-positive 99% of the time, and it will be removed by react in version 18. see this discussion.

We wouldn't want to go to a new page multiple times if the updateTodo button was pressed multiple times.

exactly.

Do you have any more examples or use-cases where we only want the last callback to be called? It would help to solidify my understanding.

I rarely execute the same mutation multiple times. routing is the best examples, as are other side-effects, like showing toasts or tracking, especially if the second mutation supersedes the first one.

[LuisAzeved]

I have a variable amount of buttons that all trigger the same mutate. Each one takes around 5 seconds to complete.
I want to be able to click on one. Then click on another one. And after that, I want both 'onSuccess' callbacks to be triggered, not just the last one.

How can I do this?

@TkDodo

[TkDodo]

You can, but they will share loading states

[jedzej]

I'm using react-query for ~3 years and it's the first time I'm facing this, but had some hard time debugging what's going on here.

I model a workflow like this:

const startWorkflow = (contextData) => {
  const data = prepareTheInput();
  mutation.mutate(
    { data },
    { 
      onSuccess: (resultData) => {
        doSomethingWithResultDataAndContextData(contextData, resultData) 
    }
  });
}

Since I'm defining the callbacks contextually, I would expect them to fire every time, not only random last one - least friction DX would be to fire onSuccess/onError/onSettled callbacks for every mutation to me.

[TkDodo]

to fire onSuccess/onError/onSettled callbacks for every mutation to me.

if you want that behaviour, please use the callbacks on useMutation. They will get access to variables as well.Yes, if contextData is not available at the top level of your component and it isn't passed as a variable to the mutation, you won't have access to it.

I'm having a hard time coming up with a situation where that is the case though 🤔 . Maybe you could show a concrete use-case where this is useful?

[jedzej]

Thanks for reply, big fan of your work, blog and twitter activity ❤️

I'm modeling presigned file upload to S3 bucket. The file object comes from the context. Also we're using trpc for most stuff where all mutation variables automatically are transfered over the wire, so we don't have the comfort of putting heavy files in.

Our async/await-based solution after it turned out that parallel submission doesn't work when modeled via onSuccess inline callbacks. The manifestation was that for N files, N presigned urls were created, but only one onSuccess was called, so only one file was actually sent.

  const sendTheFile = async (file) => {
    // create presigned url
    const createPresignedUrlResult = await createPresignedUrlMutation.mutateAsync({
      fileName: file.name,
    });

    // upload file to s3 using presigned url
    await uploadFileToS3ViaPresignedUrlMutation.mutateAsync({
      presignedUrl: createPresignedUrlResult.presignedUrl,
      file: file,
    });
  };

[TkDodo]

mutateAsync is a good solution 👍