v2.20.1 has a breaking change to invalidateQueries

[hugo-advizr]

Describe the bug
Since v2.20.1 the enabled flag of the queries isn't respected when invalidated.

To Reproduce
Steps to reproduce the behavior:

1. Invalidate a query with enabled = false
2. Since v2.20.1 the query is refetched

Expected behavior
The queries shouldn't be refetched if enabled is falsy.

Smartphone:

• Device: iOS Simulator
• Version: 2.20.1

Additional context
I believe the breaking change is here: https://github.com/tannerlinsley/react-query/compare/v2.20.0...v2.20.1#diff-bb9128e7de98a752e865baad7b27ee3bL199 (the markdown url expansion breaks the link)

Thank you in advance for any help and for this great library!

[boschni]

I tried to replicate the issue with some additional tests (see #1052) but could not replicate it. Is your case any different?

[hugo-advizr]

thanks for the quick reply @boschni

looking at the test case (and correct me if I'm wrong):

expect(queryFn1).toHaveBeenCalledTimes(1)

the expectation is that queryFn1 is never called because the enabled flag is falsy, right?

[boschni]

Hi @hugo-advizr, in that test it was fetched first with cache.fetchQuery so it should have been called once

[tannerlinsley]

The logic you're concerned about is just handled in a different place now.

v2.20.0...v2.20.1#diff-bb9128e7de98a752e865baad7b27ee3bR147

I can't replicate this bug in the latest version.

[tannerlinsley]

Feel free to reopen with a codesandbox example we can look at if you're still seeing this issue

[hugo-advizr]

I apologize for the late reply and very much appreciate your responses @boschni and @tannerlinsley

You are right, after spending some time trying to create a reproducible case I found the issue lies on having a key using the result of a dependent query:

https://codesandbox.io/s/relaxed-brook-eix9g?expanddevtools=1&fontsize=14&hidenavigation=1&theme=dark&file=/src/App.js

Notice that the query function receives a null key even though the query hook has a value every time and I'm not sure why.

Also, this is a good opportunity to get your feedback on this way of structuring dependent queries (having the dependent bit part of the second query and prevent it from running until we've that using the enabled flag - is this the correct approach?

Thank you once again for your time!

[hugo-advizr]

@boschni @tannerlinsley did you have a chance to take a look at the codesandbox above?

[boschni]

Hi @hugo-advizr, if you provide a function as predicate to invalidateQueries() then it refetches anything matching the function, including inactive queries. Use invalidateQueries() to only refetch active queries.

[josenunes-advizr]

@boschni , I'm confused, does that mean the refetchInactive option, that is false by default, has no effect when using a predicate function? If so, should the docs reflect that? https://react-query.tanstack.com/docs/api#querycacheinvalidatequeries

Personally, I think it would make sense to maintain the opinion to choose if we should refetch inactive queries or not, even when using a predicate function.

Thank you in advance!

[boschni]

Hi @josenunes-advizr! In V3 specifying a predicate function will not remove the refetchInactive default:
https://react-query-beta.tanstack.com/reference/QueryClient#clientinvalidatequeries

invalidateQueries('posts', { predicate: query => query.state.updatedAt > 0 })