All mutations get stuck in paused state if one of them fails

[maxyatsenko]

Describe the bug

• I have a mutation with retries set to 10.
• When I go offline and fire the mutation, it correctly goes to isPaused: true state.
• When I then go online and quickly go offline, the mutation starts firing and fails due to network interruption.
• Failure counts get set to 1 and the mutation is still with isPaused: true state (correctly so!)
• I go online again and the mutation will never try to fire ever again
• I try calling query.resumePausedMutations() but that makes no difference, it looks this query is just forever stuck in isPaused: true state

I noticed that when I get mutations cache, resuming property always has the Promise as a value that never resolves. Maybe this is relevant to the issue?

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/jolly-driscoll-6lqrv4

Steps to reproduce

1. Call any mutation while offline (the mutation should have retries!)
2. Quickly turn on and off internet so that the api call fails
3. Turn the internet back on
4. Observe that mutations are stuck in isPaused state

This is a video of what I am doing:

Screen.Recording.2024-02-03.at.7.50.40.PM.mov

This is a repository which I am using for the video above:
https://github.com/maxyatsenko/tanstack-query-offline-bug

Expected behavior

As a user I expected query to start all the mutations again once I'm online.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Tested this with latest Chrome and Edge.

Tanstack Query adapter

react-query

TanStack Query version

5.18.1

TypeScript version

4.4.2

Additional context

No response

[maxyatsenko]

I just realized that when this happens, I can get the first paused mutation from mutationCache and then simply use query.continue(). That seems to resolve the promise and all of the paused mutations start running again. Closing the issue 😄

[momme-rtf]

I'd like to reopen this issue. We have the same problem. We're wokring on a react native project with react query v5.25.0. After two retries (as a response to switching between online and offline) our mutation remains with the status "pending" and the isPaused flag set to true even though the retry parameter is set to 10 - similar as mentioned in this issue.
We tried the approach from @maxyatsenko which solves the problem but feels more like a hack. I'd expect react query to handle this and trigger the retry every time the user gets back online. @TkDodo Could you help us out?

[TkDodo]

I never got to look at the reproduction because the issue was closed immediately. Reopening and will take a look soon.

[momme-rtf]

FYI: I opened a discussion to an issue we faced that goes in a similar direction but is rather arguable if this should be handled by the react query package or not

[TkDodo]

definitely an issue here. I'm not happy with the whole implementation of resuming paused mutations.

I introduced the resuming field because of the issue that calling resumePausedMutations() twice would potentially make the second mutation overtake the first one. However, that means if they don't complete as shown in this issue, we can't ever resume them again because a mutation can't continue on its own. When an online even is raised, we call resumePausedMutations, which should call continue() on the mutation, but because of this fix, it does not.

Need to think about this holistically. all ideas are welcome :)