Best way to handle cancelling a multi-step mutation

[charliematters]

I appreciate there are other questions which look similar, but I'm refactoring a codebase which uses useEffect for a lot of its mutation logic, and I'd like to move to the simpler useMutation.

Simply put, my question is this: If a mutation requires more than one asynchronous step, is there any way of cancelling that function if the component gets unmounted half way through its operation.

In useEffect land, you can declare an isSubscribed variable which you reset in the clean-up callback. When doing your multiple steps of the mutation, you can check this value after each step and bail out if necessary. I looked through the docs for some sort of cancellation token akin to the network calls, but couldn't see anything. This makes me think I'm going down the wrong path

[TkDodo]

you cannot cancel mutations because mutations have side-effects on the server that cannot be stopped. For example, what would happen if you have a mutation that sends an email, and you would "cancel" the network request. How would you stop the email from being sent on the server? Or the database entry from being created?

If you have one mutation that fires multiple requests and you want to perform checks in between each one and only call them conditionally, you should be able to do that. But once a mutation request has been sent, it cannot be cancelled.

[charliematters]

Sorry, I should have been clearer. I'm only doing one call to the server, but in a number of places, we have some asynchronous preparation steps which we can easily discard. My use case is something like:

useMutation(async (data) => {
  const base64 = await convertToBase64(data)
  // We might have been unmounted by now, so bail out
  return persistData(base64)
})

I guess a related question (which might be worth it's own post) is how you handle the preliminary steps before doing the mutation - is that something firmly outside of the scope of useMutation?

[TkDodo]

what you can do is leverage the fact that onSuccess of mutate will only be called if the component is still mounted (as opposed to callbacks on useMutation, which will always be called). So this should work:

const { mutate } = useMutation(convertToBase64)

mutate(data, { onSuccess: persistData }))

[charliematters]

That's really helpful for a number of reasons - thank you!