resumePausedMutations are not running after switching from offline to online after version 4.24.3 up to 4.32.6(latest) #5847
Comments
timabilov
changed the title
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 - 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 |
|
To reproduce:
@TkDodo i believe that this is incorrect behaviour |
|
We have the same issue with React Web + React Native. |
|
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:
If we turn off airplane mode prior to relaunching the app, the mutation is is sent as expected. |
|
@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 |
|
lool, was readin my serious description over there to refresh my mind: 😂 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. |
|
I was laughing hard at that one, too 🤣 |
|
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
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? |
|
I'm having the same issue in a react-native/react-native-web + react-query project using react-query version 4.29.7. |
|
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. |
|
@tmikoss if this is important to you, please consider contributing a fix. |
|
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:
You would get the mutations resumed after step 4, even if you are offline. They would then likely fail with 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: |
|
I tested by updating the offline example to the beta versions below: Then doing these steps:
My observations:
The mutation stayed
I didn't see any network errors in Chrome dev console. (Maybe I'm looking in the wrong place?)
I tried both with and without
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 |
Thanks, things work for me with 4.24.2. Tried the latest beta with no luck. |
@adampax the mock api intercepts network requests and delivers results before the actual fetch is made. The difference between v4 and v5 is that in v5, we always start with being online - so our internal With that in mind, I think what you are seeing is expected. If we'd try with an actual API call, it would fail with |
@badsyntax can you show a reproduction with v5 beta please? Or a replay.io recording? That would really help ... |
|
@TkDodo in the meantime i've create a repro here, see README for instructions: https://github.com/badsyntax/react-query-mutation-resume-bug i'll see what i can do with replay.io |
|
thanks for this, I think I figured it out a bit: when we resume paused mutations after you've reloaded the page, there is no "retryer" that can pick up the mutations from where they left, so we just always execute them: query/packages/query-core/src/mutation.ts Line 162 in 13b17ee This will then create the retryer and return a pending promise, because we start in This was the fix that made sure that resuming paused mutations will always run in serial. Now when you go online again, we call query/packages/query-core/src/retryer.ts Lines 212 to 215 in 6fcfc9b but it doesn't work if you are offline when the page loads. I need to think a bit how to tackle this holistically, but what you can do on your end if to simply wrap the call to <PersistQueryClientProvider
client={queryClient}
persistOptions={{ persister }}
onSuccess={() => {
// resume mutations after initial restore from localStorage was successful
+ if (onlineManager.isOnline()) {
queryClient.resumePausedMutations().then(() => {
queryClient.invalidateQueries()
})
+ }
}}
>We should probably do this internally, but I have to think about where exactly without breaking things. Also, this should be significantly less relevant with v5 because the |
|
@TkDodo thanks for the investigation & explanation, that all makes sense! i can confirm the workaround works with the latest v5 beta [edit] The workaround works in the repro, but i'm still having problems when using the beta in React Native. I don't understand the difference but i'll update this thread if i figure it out. |
|
Hey guys, I'm arriving here from what I think is a similar issue on v5, where mutations aren't firing after the page refreshes (and reconnects). Tell me if my issue applies, or if I should create a separate issue (or if I'm just doing something incorrectly). My mutations are working properly when the internet connection goes from off → on. However, it does not work when refreshing the page and then turning the network from off → on.
This all logs properly too: onSuccess() {
console.log('[PersistQueryClientProvider] onSuccess')
chatQueryClient.resumePausedMutations().then(() => {
console.log('[PersistQueryClientProvider] resumePausedMutations')
chatQueryClient.invalidateQueries()
})
}Any ideas for why my mutations aren't firing again when the page refreshes and it's pulling them from local storage? Thanks! |
if it gets deleted, it means its no longer in paused state. Can you show a separate reproduction for this please? |
|
Yeah I’ll put one together today. I assume it is no longer paused because I call |
|
As a follow up, I put together a reproduction here. However, it doesn't actually reproduce my error (because it does indeed work), so I assume something is up on my end. I've been exploring this for days but I can't seem to figure it out. I recorded a quick video in case it might ring a bell for what could be happening. If you're able to look at it, it would be super appreciated. Here's a video of what's happening. https://www.loom.com/share/74d344da67b942a183ec0461bf5aa7b4 TLDR: Disconnecting & refreshing the page appears to empty out my The behavior feels very odd. If you look at the I called I'm wondering if my issue is somewhat related to this: #5867 |
|
@TkDodo After adding the workaround you mentioned to the web example, i was still seeing the same behaviour in my React Native app. Your explanation of the initial problem ( In my case i was setting the focused state with the This was the code i was using to set the focused state: import { focusManager } from '@tanstack/react-query';
import { useEffect } from 'react';
import type { AppStateStatus } from 'react-native';
import { AppState } from 'react-native';
export function useAppFocusState() {
useEffect(() => {
const subscription = AppState.addEventListener(
'change',
(state: AppStateStatus) => {
focusManager.setFocused(state === 'active');
},
);
return () => subscription.remove();
}, []);
}To figure this all out i edited the code in At the end of the day i'm happy to say now i have no problems with the offline cache in my react native app using v5. |
|
Hi! 👋, First of all, thank you for this library such an amazing work! I think I'm facing a similar issue as described above. I'm using ReactQuery with GraphQL in my React Native App, and resuming offline mutations seems to be failing when I kill my app and open it again but still offline. So far I have found out that when I start the app fresh, and when I'm offline it looks like mutation gets fired, and because of that it will go to Error state and will be no longer paused. I'm not sure if this is expected? I have tried this workaround but this doesn't help as if (onlineManager.isOnline()) {
queryClient.resumePausedMutations().then(() => {
queryClient.invalidateQueries()
})
}But even if I remove My code: // App.ts
export default function App() {
useQueryFocusManager()
const setPendingMutations = useSetAtom(pendingMutationsAtom)
const isAuthorized = useAtomValue(isAuthorizedAtom)
const themeScheme = useThemeScheme()
const theme = useTheme(themeScheme)
if (isAndroid) {
NavigationBar.setBackgroundColorAsync(!isAuthorized
? theme.colors.background
: theme.colors.accent
)
}
return (
<PersistQueryClientProvider
client={queryClient}
persistOptions={{
persister: syncStoragePersister
}}
onSuccess={() => {
queryClient.resumePausedMutations().then(() => {
setPendingMutations(0)
})
}}
>
<GraphqlContext.Provider value={graphqlClient}>
<ThemeProvider theme={theme}>
<SafeAreaProvider>
<Wrapper>
<AppRouter />
<StatusBar style={themeScheme === 'dark' ? 'light' : 'dark'} />
<Toast />
</Wrapper>
</SafeAreaProvider>
</ThemeProvider>
</GraphqlContext.Provider>
</PersistQueryClientProvider>
)
}// reactQueryClient.ts
onlineManager.setEventListener(setOnline => NetInfo.addEventListener(state => setOnline(Boolean(state.isConnected))))
export const onAppStateChange = (status: AppStateStatus) => {
if (Platform.OS !== 'web') {
focusManager.setFocused(status === 'active')
}
}
export const queryClient = new QueryClient({
defaultOptions: {
queries: {
gcTime: 1000 * 60 * 60 * 24 * 7,
},
mutations: {
gcTime: 1000 * 60 * 60 * 24 * 7,
}
},
})
queryClient.setMutationDefaults([MutationKeys.CreateCategory], {
mutationFn: variables => graphqlClient.request(CreateCategoryMutation, variables),
})
export const syncStoragePersister = createSyncStoragePersister({
storage: reactQueryStorage
})// useQueryFocusManager.ts
export const useQueryFocusManager = () => {
useEffect(() => {
const subscription = AppState.addEventListener('change', onAppStateChange)
return () => subscription.remove()
}, [])
}// useCreateCategory.ts
export const useCreateCategory = () => {
const request = useRequest()
const queryClient = useQueryClient()
const { handleError } = useRequestHelpers()
return useMutation<CreateCategoryMutationType, ClientError, CreateCategoryMutationVariables, { meQuerySnapshot: MeQuery | undefined }>({
mutationKey: [MutationKeys.CreateCategory],
mutationFn: createCategoryMutationInput => request({
document: CreateCategoryMutation,
variables: createCategoryMutationInput
}),
onMutate: async newCategoryInput => {
await queryClient.cancelQueries({ queryKey: [QueryKeys.Me] })
const meQuerySnapshot = queryClient.getQueryData<MeQuery>([QueryKeys.Me])
queryClient.setQueryData<MeQuery>([QueryKeys.Me], oldData => {
if (!oldData) {
return undefined
}
return {
...oldData,
me: {
...oldData.me,
categories: [
...oldData.me.categories,
{
__typename: "Category",
id: `${PENDING_PREFIX}-${Crypto.randomUUID()}`,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
name: newCategoryInput.data.name
}
]
}
}
})
return { meQuerySnapshot }
},
onError: (error, _, context) => {
handleError(error)
queryClient.setQueryData([QueryKeys.Me], context?.meQuerySnapshot)
},
onSettled: () => {
queryClient.invalidateQueries({ queryKey: [QueryKeys.Me] })
},
})
}Example:
23-11-19-10-06-54.mp4
23-11-19-10-07-37.mp4
23-11-19-10-08-28.mp4I'm looking for some ideas how can I handle 3rd case? Is there any way I can maybe inside error in |
|
@schriker for the 3rd case, although a little different to my case, to fix it i had to remove the |
Yes, I have tried I think all workarounds from this issue but none seems to resolve my case. At the moment I'm thinking on catching all mutations on default on Error and handling this somehow. But not sure yet. BTW. i forgot to post that I'm using versions: |
|
@badsyntax Ok, You were right 👍 This was good direction, basically I had to check if I'm online using NetInfo library but in 2 places:
<PersistQueryClientProvider
client={queryClient}
persistOptions={{
persister: syncStoragePersister
}}
onSuccess={() => {
NetInfo.fetch().then(state => {
if (state.isConnected) {
queryClient.resumePausedMutations()
}
})
}}
>
NetInfo.fetch().then(state => {
if (state.isConnected && Platform.OS !== 'web') {
focusManager.setFocused(status === 'active')
}
})For the focus manager I think there might be better way to handle this I just posting it for now like this. With this it looks like all 3 cases from my previous post works 👍 |
|
It would be ideal if the library would handle these states for us based off the state of the online manager. |
|
Just ran into the same issue and figured it out (thanks @schriker) so leaving some notes. In particular the issue is:
react query should resume mutations but it doesn't. When you trigger a mutation, it correctly gets persisted. Assuming your storage works, when you reload the app, the mutation gets restored. At this point, if you naively call However, if you conditionally call Hopefully the longer explanation is useful to understand what's going on under the hood. |
|
Would it work if we'd wrap resumePausedMutations internally in another check if we're really online ? or should we just document that such a check might be necessary in user-land before calling it ? |
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
This happens in my React Native setup too.
So it stucks/waits here:
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.
The text was updated successfully, but these errors were encountered: