fix(scheduleGarbageCollection): Do not garbage collect newly cached queries of the same hash

[kamranayub]

tl;dr

When a query is unmounted, it schedules a GC. Normally this is fine but during a test run, we clear the cache before components get unmounted automatically (at least in @testing-library/react) so the GC still runs and wipes out the next test's cached queries.

Background

Tracked down a very tough-to-isolate case where when using manual: true around queries will cause test inconsistencies when trying to use prime the cache using setQueryData or prefetchQuery.
To reproduce this, you have to import the components from another module, you can't declare them inline in the suite. I tried that initially and things were passing.

It appears that not everything is cleaned up on unmount like you'd expect in this case, since running each test independently (using .only) will pass, but when run sequentially, the second fails.

If I use this patch of RTL I made at testing-library/react-testing-library#632 then the tests will pass, which leads me to think this an underlying issue with react-query.

If I prefetch both queries each time, the tests will pass but the point of this is to showcase that if I don't do that, I get test inconsistency. In the real world, we ran into this because we have 6+ queries that run in a large composite component and we aren't mocking each one for every test, just the queries that are being tested.

Changes

• Add test coverage of this issue in queryCache spec
• Add state.markedForGarbageCollection flag to check before removing queries

Proposed Solution

I think this is a fairly streamlined solution now. I have introduced a new action actionMarkGC that sets the state.markedForGarbageCollection flag to true.

When the query.scheduleGarbageCollection() timeout runs, it makes sure it only removes the queries where the flag is true and the query hash matches.

This should avoid accidentally removing a newly cached entry.

[kamranayub]

I think I found the issue: query.scheduleGarbageCollection() is called on unmount and the newly prefetched cache is cleared on the next test because it happens after the cache is cleared in afterEach.

The following conditions have to be true it seems:

• manual: true for all queries
• More than one query in use
• Queries must be "deferred" (through a condition, etc., like a modal)

Here is the sequence of events after a test is done:

• suite afterEach: queryCache.clear()
• RTL afterEach: microtasks.flush()
• RTL afterEach:render.unmount()
• During react-query unmount: query.scheduledGarbageCollection()

So the reason that the RTL patch fixes things is because it ensures the scheduled query garbage collections occurs before the next test is run.

There could be several ways to fix this but essentially query.scheduledGarbageCollection() needs to change to ensure it is run against the cache it was invoked with and not after a cache clear.

[kamranayub]

This is called automatically by RTL?

[tannerlinsley]

Ohhhhh yeah. This is good stuff!