Looking for advice on how to debug intermittent bug related to query invalidation
I have a React app that needs to refresh queries when events happen on the server. When the app receives a server event (events are sent using Pusher), it invalidates the relevant queries.
Sometimes, this works great and all queries are refreshed properly. However, sometimes there are queries that do not refresh properly. When this happens, I observe a disconnect with what seems to have been fetched vs. what is stored in the react query cache (based on what the react query debugger displays).
One place where I see this most often is on a screen which displays both an infinite scroll list, along with a count. To generate these, we do two separate queries - one for the list and one for the count. I observe that the count (which we get from useQuery, not useInfiniteQuery) always seems correct, but the infinite scroll list may not display the most recent data after the server event. I do see in the logs that react query has triggered the queryFn, which does returns the correct data. However, what is displayed in the react query devtools is still the old data, even though the Last Updated reflects that it has been updated.
I have been struggling with this on and off for several weeks now and it is causing major problems during demos and with our early users. I'm not certain this isn't developer error on my part, but I'm at a bit of a loss as to how to debug.
So to summarize, I have a console.log statement at the end of the queryFn that shows the data was retrieved correctly. I have used the react query devtools to see that the cached data does not always match the newly returned data even though Last Updated was updated. If I click Refetch in devtools, I get the updated data.
What do you recommend I do next to determine why my infinite react query does not always have the updated data after a query invalidation?
Currently on:
0 Replies