Replies: 1 comment
-
The code generally looks correct. However, I would try to make sure that each tests has its own version of the QueryClient. My guess is that this is your production setup:
as in tests, you'll likely have something different like an in-memory router ? So, my point is, what we do in cypress tests is we render each component in the tests with a new QueryClient, something like:
TestWrapper can contain more stuff like routers or other contexts you'd need to mock |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hi all, first of all thank you for creating and maintaining
react-query
. We use it extensively and love it!I wanted to discuss an issue we have been seeing with the cached values becoming
undefined
intermittently, without seemingly any reason. I’ve spent a fair bit of time reproducing and debugging this and it only has a repro rate of around 15-30%. We have been seeing this mostly in our e2e (Cypress) tests where it causes test flake both on the CI server and locally.We use React v17 and we have a simple custom hook that returns (via
react-query
) data from an endpoint (list of locations). All code is included below.This problem happens only if we specify a
staleTime
. If we remove it, it goes away completely.Version’s of
react-query
that we have tried:v4.20.4
v4.29.1
(we upgraded tov4.29.1
in an attempt to fix this, and it didn’t help).This might be something on our end, however disabling
staleTime
eliminates this issue which suggests something related toreact-query
. I also ran out of ideas on how to further debug this and so I would welcome any ideas you might have. Unfortunately I do not have a reproduction repo because we can’t even repro it reliably ourselves (have to run 10x-100x identical tests to get it to show up). Otherwise I would have filed this as an issue.There seemed to have been many similar issues, e.g. #1657.
What could be causing
react-query
’s cached data to becomeundefined
if all of the fetch queries populating said cache execute timely and correctly? One idea I had was that maybe browser reloads would trigger it, but: a) I have tested without them and was still able to reproduce b) reloads still trigger fetches in the correct order so the cache should be populated (but isn’t).Is there a reliable way to hook into the internals of
QueryCache
and determine what even causes thedata
to be set asundefined
(or rather deleted/unset)? I’ve been usingqueryClient.getQueryCache().subscribe(callback);
and I see events related to this specific query key but nothing suggests to me what causes the issue. Is there a better way?Mind you, this is NOT just something we observe for a fraction of a second (hooks thrashing and re-rendering many times where
undefined
shows up for a brief moment). The e2e tests have a timeout of 10 seconds where they wait for UI to update and in this case lack of said data in cache causes the hook to not re-render at all.Below are snippets of code that illustrate how we use react-query.
The problematic hook
How we configure QueryClient and provide it in our app
The actual fetch function
How we subscribe to the QueryCache to get some debugging info
After having hooked into the cache, this is a fragment of the output that I got. The
cons:log *
orcy:*
prefixes are simply how a Cypress plugin output logs to stdout. I have also confirmed by using ReactQuery DevTools that the correct data is in cache, yet the hook has not been updated with it.I have annotated the interesting parts with
-->
. There is a browser reload happening in the middle of the tests (and I know that cache is only in-memory), but even without the reload the behavior is identical.Subscribe log
Beta Was this translation helpful? Give feedback.
All reactions