Show banner to user when the mutation paused start to sync
Hello, I'm trying to do a feature where I made a mutation offline... We are using persistQueryClient.
And when I go back online, the mutation start to sync... but still take some time to sync all mutations.
I'm trying to show the user a message saying, "App is syncing".
I try to use the
useIsMutating, that work very well, but this is true also when I make normal mutations when I'm online.5 Replies
deep-jadeOP•3y ago
Thinking if make sense to use the
clientState, but it was helpful to have a Hook to know when it changed.
I was trying with queryClient.getMutationCache().getAll().length
But I need a hook to be updated when changes are done...deep-jadeOP•3y ago
I'm looking to Mutation Cache subscribe : https://tanstack.com/query/v4/docs/react/reference/MutationCache#mutationcachesubscribe
MutationCache | TanStack Query Docs
The MutationCache is the storage for mutations.
Normally, you will not interact with the MutationCache directly and instead use the QueryClient.
deep-jadeOP•3y ago
Sorry to bother you @TkDodo 🔮 , I really was hoping to have your opinion on this 👆
stormy-gold•3y ago
I try to use the useIsMutating, that work very well, but this is true also when I make normal mutations when I'm online.https://developer.mozilla.org/en-US/docs/Web/API/Navigator/onLine is used internally so you can use this in conjunction with useIsMutating.
deep-jadeOP•3y ago
@Louis Thanks for the response.
I already use this navigator flag. But I want to show the banner when I'm online.
When I'm online I can also make other mutations, and in this case IsMutating is true also.
I only want to show the is syncing banner, when the user have mutations paused, and they start to sync.
I could get something that is what I expect.
const isMutating = useIsMutating({
predicate: (mutation) =>
mutation?.state.isPaused
});
This only return the mutation that are paused.
Now I'm having a different problem...
I was expecting to only remove the banner after the mutation is done.
But right after I go online, the isMutating is decreasing for 1.
I will try to make a video to explain better.
I'm using this isMutating:
const isMutating = useIsMutating({
predicate: (mutation) =>
mutation?.state.isPaused && mutation?.state.status === "loading",
});
Don't know why... right after the application status goes from offline to online... the IsMutation decrease by one.
In this video we can see how the app react with more than one mutation.
https://youtu.be/NAKH16otU8A
In this video we can see how the app react with only one mutation... right after the online th isMutating decrease by 1.
https://youtu.be/FzkAcPJLWL0
Can Someone from @Maintainer - Query look at this? 😳