T
TanStack2y ago
other-emerald

`data` becomes undefined / stale data for a second

I am using react-query like so. I am noticing that when I change the value of page via client state, the data returned by the useQuery reverts back to initialData while the fetch happens and then gets populated with the new data. It results in incorrect data being shown for the duration of the fetch (half a second). How can I prevent this?
No description
6 Replies
national-gold
national-gold2y ago
by not setting initialData for a query if you don't want it. Every new queryKey creates a new query (you can see that in the devtools), and every time a new query is created, initialData will be respected. so you need to conditionally set initialData if you only want it for a specific seenPage
other-emerald
other-emeraldOP2y ago
makes sense. But why does data become undefined for a second when the query key changes? (considering I do not provide initialData). Is there any way to change this behaviour?
national-gold
national-gold2y ago
a new key means a new query, which is in status: 'pending', data: undefined. It doesn' t know anything about other queries. You can set placeholderData: (previousData) => previousData to keep data of previous queries on screen while you are transitioning between queries
other-emerald
other-emeraldOP2y ago
okay thanks. thats what I needed. Is this not the default behaviour?
national-gold
national-gold2y ago
no
other-emerald
other-emeraldOP2y ago
!resolved

Did you find this page helpful?