Run only the latest mutation created offline, when back online

[Jaarson]

Hi! 👋

Here's the use case:
I have a text editor and I'm offline. I write some text, which creates mutations as I type (there is a debounce time)

Mutation 1:

Hello

Mutation 2:

Hello I'm

Mutation 3:

Hello I'm Jarek 👋

And when I'm back online, all 3 will be executed – while I'd like to execute only the last one.
Is there an easy solution for this in React Query?

[TkDodo]

No, I don't think so. resumePausedMutations() resumes all paused mutations - we can't assume a correlation. If you were online, you would've also executed all three.

[justynjozwiak]

@TkDodo in this case is this possible to cancel the mutations that we do not want to run after network connection is restored?
I have pretty similiar trouble:

• app is using editor
• internet connection is dropped for lets say 1 hour
• user is using the editor which produces a lot of mutations which in online mode would produce some amount of requests to the server
• after connection is back again React Query would fire hundreds of requests to the server instead of just 1 as I'm only updating one single entity and want to fire only one request when connection is restored

so I imagine it would be great to have possibility of canceling all the mutations if the onlineManager.isOnline() changes from false to true - do you have by any chance some workaround idea on how I could handle that desired behaviour?

thank you in advance!

[louis-young]

Could you just not make the mutations when you're offline and then make a mutation to save the current state of the editor imperatively when the connection is restored?

[justynjozwiak]

@louis-young the point is that I want to make the mutations when I'm offline, but mutations I mean optimistic updates here not sending the requests because we're offline obviously, but then when the internet connection is restored, all of the requests associated with those mutations are automatically sent by React Query, I'd like to cancel those requests and send just 1

[TkDodo]

you can't cancel mutations. What you'd need to do is, before you resumePausedMutations, you would have to delete the mutations you want from the mutationCache. This is what resumePausedMutations does:

const pausedMutations = this.#mutations.filter((x) => x.state.isPaused)

so you can try to find mutations that you don't want with queryClient.getMutationCache().getAll().filter(...)

and then call queryClient.getMutationCache().remove(...) on all of them. Each mutation has a submittedAt field (added in v5), so if you tag your mutations with a mutationKey, you can find out the latest one and remove all the rest I guess.

[justynjozwiak]

@TkDodo thanks! I will try this out!