resumePausedMutations are not running after switching from offline to online after version 4.24.3 up to 4.32.6(latest)

[timabilov]

Describe the bug

8991d7c this is the commit where it breaks (4.24.3)

Not sure if this is correct behaviour. But based on the commit above i assume it is a bug indeed.
Paused mutations get stuck when rehydrating(loading) mutations in offline mode and switching back online.

Basically, when you reenter the exited app in offline mode it restores the mutations successfully, i see paused mutations in logs as a result of resumePausedMutations.

But when you get back online, paused mutations do not run. This happens in latest 4.32.6. When i reload(React Native) my javascript it runs again.
But, i got to the version where it works and triaged this.
basically this is the commit where it starts breaking
8991d7c

Shortly, 4.24.3 and upper version causes this bug

Your minimal, reproducible example

Run https://github.com/TanStack/query/tree/main/examples/react/offline

Steps to reproduce

1. Go to any movie
2. Go offline/ turn off your wife
3. Add comment (to verify, add it three times)
4. Refresh the page
5. ENABLE your WIFI and then wait
6. Nothing happens, but expected this mutations to get unpaused
7. Refresh the page and you see updates are applied now sequentially.

This happens in my React Native setup too.

1. Go offline
2. Add todo (fire any mutation which will be paused)
3. Exit from app then enter again (both RN debug/release mode)
4. enable internet
5. At the end i see 1 paused mutation pending in my logs.
   So it stucks/waits here:

queryClient.resumePausedMutations()

Expected behavior

As a user, i am expecting all mutations to start running after resume, but no mutations are running in that case.
In logs they are all paused

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

React Native 0.70.6

Tanstack Query adapter

react-query

TanStack Query version

4.32.6 (but started in 4.24.3!!)

TypeScript version

No response

Additional context

If i will reload my javascript after 5th step, then it resumes mutations again and runs them correctly

Also, if you have internet enabled before entering the app, it works as expected.

[timabilov]

resumePausedMutations() {
  if (!this.resuming) {
    const pausedMutations = this.mutations.filter(x => x.state.isPaused);
    this.resuming = notifyManager.notifyManager.batch(() => pausedMutations.reduce((promise, mutation) => promise.then(() => mutation.continue().catch(utils.noop)), Promise.resolve())).then(() => {
      this.resuming = undefined;
    });
  }

  return this.resuming;
}

So, i found that this is related to the fact that i have multiple setOnline(true) calls, and because of that 'resuming' patch - mutation.continue() only fired once where it basically still stays in pause.
But without this resuming patch, subsequent setOnline(true) -> resumePausedMutations calls fires my requests.

To be sure, it is definitely not request hanging or some timeout issues because my mutationFn is not called at all with given conditions.

Not sure if it is related to something with my connection anyway, because after setOnline(True) it still should trigger mutations, which is weird. but i see only resumePausedMutations triggers

[timabilov]

To reproduce:

1. Run https://github.com/TanStack/query/tree/main/examples/react/offline
2. Go to any movie
3. Go offline/ turn off your wife
4. Add comment (to verify, add it three times)
5. Refresh the page
6. ENABLE your WIFI and then wait
7. Nothing happens, but expected this mutations to get unpaused
8. Refresh the page and you see updates are applied now sequentially.

@TkDodo i believe that this is incorrect behaviour

We have the same issue with React Web + React Native.

[adampax]

Also experiencing this or something similar on React Native with v4.24.6 of query, the query client, and async storage persister.

To test, we do the following:

1. Turn the device to airplane mode or turn off wifi + data
2. Perform a mutation. Observe with useIsMutating() that mutation count is > 0
3. Remove the app from background
4. With airplane mode still enabled, relaunch app
5. Turn off airplane mode, observe that app and queryClient go online, but mutation is never POSTed, mutation count remains > 0

If we turn off airplane mode prior to relaunching the app, the mutation is is sent as expected.

[TkDodo]

@timabilov for some reason, I can't get our own example to work. All the endpoints return 404 for me. Could be something with mock service worker that we are using in there :/

I would appreciate it if you could come up with a failing test case from within our repository, that would be the easiest for me to get started with understanding that issue. Thanks

[timabilov]

lool, was readin my serious description over there to refresh my mind:
2. turn off your wife

😂

Sorry, that might take some time for me to write testcase now, but i already found the commit which is causing this issue, hope someone will help here.
Will try to reproduce this with test case in case if i will have a time

[TkDodo]

I was laughing hard at that one, too 🤣

[adampax]

The Code Sandbox version isn't working for me either (https://tanstack.com/query/v4/docs/react/examples/react/offline) but when running it locally with @timabilov's steps, am able to reproduce

To reproduce:

1. Run https://github.com/TanStack/query/tree/main/examples/react/offline
2. Go to any movie
3. Go offline/ turn off your wife
4. Add comment (to verify, add it three times)
5. Refresh the page
6. ENABLE your WIFI and then wait
7. Nothing happens, but expected this mutations to get unpaused
8. Refresh the page and you see updates are applied now sequentially.

I think it important to note that the issue happens when turning off the computer's wifi (or wife!) in the steps above and refreshing the page while the wifi is still disabled.

Disabling the connection via the Devtools doesn't reproduce the issue for me, perhaps because the connection is automatically restored when refreshing?

[janisievins]

I'm having the same issue in a react-native/react-native-web + react-query project using react-query version 4.29.7.
Tried rolling back to 4.24.2 and I confirm that the issue is not present in that version.

[tmikoss]

Eagerly awaiting a fix on this. What's worse, the bug is both easy to encounter ("why won't this work, better refresh the page a couple times to be sure, oh my internet is off"), and hard to write automated tests for. A downgrade will solve this for now, but sooner or later we'll have to upgrade.

[TkDodo]

@tmikoss if this is important to you, please consider contributing a fix.

[TkDodo]

maybe someone can try this with v5 beta? We've changed how online detection works because of issues in chrome. So in v5, you'll always be seen as "online" in the react-query onlineManager, and we'll only go offline if there is an explicit offline event. I think this means that in the following steps to reproduce:

1. Go to any movie

2. Go offline/ turn off your wife
3. Add comment (to verify, add it three times)
4. Refresh the page
5. ENABLE your WIFI and then wait
6. Nothing happens, but expected this mutations to get unpaused
7. Refresh the page and you see updates are applied now sequentially.

You would get the mutations resumed after step 4, even if you are offline. They would then likely fail with NetworkError. If you have retry set to at least 1, they would then be paused. I would expect step 5 to continue them normally then.

We're aware that this change in how we handle online / offline states might be a step back for offline apps, but it's the better tradeoff / lesser evil in this case.

See:

• fix(onlineManager): always initialize with online: true #5714
• https://tanstack.com/query/v5/docs/react/guides/migrating-to-v5#network-status-no-longer-relies-on-the-navigatoronline-property

[adampax]

I tested by updating the offline example to the beta versions below:

    "@tanstack/query-sync-storage-persister": "^5.0.0-beta.20",
    "@tanstack/react-location": "^3.7.0",
    "@tanstack/react-query": "^5.0.0-beta.20",
    "@tanstack/react-query-devtools": "^5.0.0-beta.20",
    "@tanstack/react-query-persist-client": "^5.0.0-beta.20",

Then doing these steps:

1. Run https://github.com/TanStack/query/tree/main/examples/react/offline
2. Go to any movie
3. Go offline/ turn off your wife
4. Add comment (to verify, add it three times)
5. Refresh the page
6. ENABLE your WIFI and then wait
7. Nothing happens, but expected this mutations to get unpaused
8. Refresh the page and you see updates are applied now sequentially.

My observations:

You would get the mutations resumed after step 4, even if you are offline.

The mutation stayed isPaused here.

They would then likely fail with NetworkError.

I didn't see any network errors in Chrome dev console. (Maybe I'm looking in the wrong place?)

If you have retry set to at least 1, they would then be paused.

I tried both with and without retry here and they appeared to behave the same.

I would expect step 5 to continue them normally then.

On Step 5 (refreshing the page while wifi remains turned off), the mutation is shown as successful, with the toast message 'Successfully updated movie 1'. Additionally, while the wifi remains off, if I make more mutations, they are shown as successful.

I'm not sure how the mutation could be successful after Step 5 with wifi still off. Maybe it is related to testing with a local endpoint? I didn't look to closely how the mock api is set up.

I went ahead and tested beta 5 with my React Native project and the behavior remained the same as above

[badsyntax]

I'm having the same issue in a react-native/react-native-web + react-query project using react-query version 4.29.7. Tried rolling back to 4.24.2 and I confirm that the issue is not present in that version.

Thanks, things work for me with 4.24.2. Tried the latest beta with no luck.