Way to avoid refresh while there are paused/dangling mutations waiting to run?
👋 Started using React-Query a few weeks ago and loving it. Its very refreshing, outright fun!
I've gotten pretty far with my experimental shopping list app and last time out we noticed that the internet at our grocery store is terrible. I searched a bit around and have experimented with optimisitic updates in the mutation that checks off items in my shopping list.
When I know turn the internet off via the DevTools, I'm able to check/uncheck items and the mutations complete when I get back on the internet.
Its the intermediary state that looks a bit janky: While my app flushes all the mutations that have accumulated, I get almost like a little replay of all the clicks.
You can see it in the video
In essence, I think I'd like to detect when there are multiple paused mutation in the background, let them all succeed, before doing a background refresh. That way I wouldn't get flashes of intermediary states.
Is this possible? Am I thinking in the right direction? Happy to share any code.
4 Replies
typical-coral•3y ago
You probably shouldn't invalidate the query while there are still running mutations that affect the same list
extended-salmonOP•3y ago
Is there a way to detect that?
I don't think I can use
useIsMutating() inside onSettled and if I lift it out it would be a snapshot of time-of-render, no?typical-coral•3y ago
put if(queryClient.isMutating() === 1) around the invalidation
extended-salmonOP•3y ago
ah cool