Preserve part of the cache when refetchOnWindowFocus refreshes data.
Hi folks, I have a situation where I am rendering messages to the chat. Messages are the array of objects with all relevant data.
I use an optimistic update (with mutation) when the user sends the message. onMutate: I am updating the "MESSAGES" cache and its msgStatus to 'pending', onSuccess changes its status to 'success'.
When a message fails to send (mutation) I am setting its status to msgStatus: 'error' in the onError function and I render a "retry" small button beside the message.
I have "refetchOnWindowFocus: true" for updating the messages and it overrides the cache and deletes the last saved message with the "msgStatus: error". I tried to set the select function and I try to get the "MESSAGES" snapshot and merge it with the data but it is not working. It still deletes the error message somehow.
I want to preserve that error message in the messages list in the cache until the user succeeds to send it but I want to refresh the data with refetchOnWindowFocus while keeping the error message with retry button at the end of the list in the chat.
Is there a way to make this work? Any suggestion would help. I suppose that the "onSuccess" function runs after the cache is updated and the "select" function runs before? I am using the same cache for storing the messages and onMutate updates that cache.
8 Replies
eager-peach•3y ago
refetchOnWindowFocus can be a function, so you can turn it off while you have your manually updated entry in there:
afraid-scarletOP•3y ago
yeah, I was thinking about that but I wanted to actually fetch new messages (from the other user) and show them in the chat if that is possible
eager-peach•3y ago
aah, you'll love the new optimistic updates in v5 then: https://twitter.com/TkDodo/status/1626950688361046017
Dominik 🇺🇦 (@TkDodo)
Optimistic updates will be a totally different, simplified experience in TanStack Query v5 🤯
We can now just render the variables of the running mutation instead of writing directly to the queryCache in
onMutateLikes
504
Twitter
eager-peach•3y ago
in the preview docs, I've also shown the use-case with a retry button: https://tanstack.com/query/v5/docs/react/guides/optimistic-updates#via-the-ui
Optimistic Updates | TanStack Query Docs
React Query provides two ways to optimistically update your UI before a mutation has completed. You can either use the onMutate option to update your cache directly, or leverage the returned variables to update your UI from the useMutation result.
Via the UI
eager-peach•3y ago
the key is that this version doesn't actually write to the cache, it just appends it in the UI, so refetches don't matter
afraid-scarletOP•3y ago
Thanks, I will try it. We are using v4 and we need to migrate to v5 first 🙂
How can install version 5? 🙂
is it published?
can I use useMutation's "status" (in version 4) as I can see it will provide the same API?
eager-peach•3y ago
working on it ..
afraid-scarletOP•3y ago
thanks!
so it will use the same API as status(v4)?