invalidateQueries doesn't work when enabled attribute is set to false

[sayinserdar]

queryCache.invalidateQueries() function doesn't work if the related useQuery definition has { enabled: false } configuration.

Here is the definition of my 'menus'

If I try to create a new 'menu', invalidateQueries works as expected

But if I add a configuration as { enabled: false} as in the below image invalidateQueries function doesn't work

I've spent too many hours on this issue. I changed every other details/configuration but nothing helped. I also tried my other queryKeys other than 'menus' but the problem remains. In my case, it's not a big deal to remove the { enable: false } configuration but is this the expected output ?

• OS: macOS
• Browser: Any browser
• 10.15.3

React Query - v2.12.1
React Query Developer Tools - v2.3.2

Apart from this issue React Query has been smooth and wonderful. Thanks everyone who contributes this project.
Peace

[boschni]

What happens if you set refetchInactive to true? https://react-query.tanstack.com/docs/api#querycacheinvalidatequeries

[sayinserdar]

What happens if you set refetchInactive to true? https://react-query.tanstack.com/docs/api#querycacheinvalidatequeries

Unfortunately, nothing has changed. Doesn't invalidate

[jsangaritar]

Hi, im using "react-query": "^3.24.3" and this issue is still happening, i have a query defined with enable: false and when i want to invalidate it does not work with that config.

[TkDodo]

disabled and inactive are not the same thing. Disabled queries will never be refetched, except with refetch() returned from useQuery. Documented here: https://react-query.tanstack.com/guides/disabling-queries

[jsangaritar]

Yeah, thankfully there is only one child component so i passed the refetch function as a callback prop. Tho, it would be nice to have another prop or something like `invalidateQueryOnRefetchDisabled` (not good with names). *Johnathan Angarita Romero* *Tech Lead & Front-End Developer * *Development & UX* El sáb, 8 ene 2022 a las 7:57, Joshua Folorunsho ***@***.***>) escribió:

…

@jsangaritar <https://github.com/jsangaritar>, were you able to find a way around it? — Reply to this email directly, view it on GitHub <#947 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABKLHYXEDVUGJZ5APEJGZ2LUVAYD7ANCNFSM4QRQYE3A> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[TkDodo]

@jsangaritar I'm still wondering what your use-case is where you disable a query but then want to trigger a refetch of that disabled query from another component... it seems like this doesn't work with RQ, but a bit against it. The query will still be disabled after refetch and you won't benefit from smart revalidations ...

[Maximilon]

@jsangaritar I'm still wondering what your use-case is where you disable a query but then want to trigger a refetch of that disabled query from another component... it seems like this doesn't work with RQ, but a bit against it. The query will still be disabled after refetch and you won't benefit from smart re-validations ...

Hi TkDodo

I have a use case where I am wanting to load queries and receive items based on a button click and then delete one of those items on the UI.

I have set up the enabled:false so that the query retrieves the list of items based on the button press.

User actions:
user presses the button, useQuery returns data
data is mapped and also populated with a delete button next to each item
the delete button is pressed triggering a mutation
mutation succeeds and invalidation runs

Current behavior
The mutation succeeds, but the page does update the UI

Discussion
Invalidation works brilliantly without the enabled:false flag -- if I omit the flag then I get the real-time refresh behaviour (based on invalidate) however, I want the enabled flag so that the query only runs on the original button press/submit

So Indeed my understanding this is a bug or a feature that seems counter intuitive as it works without the flag just fine.

Workaround
I replaced invalidateQueries with refetchQuery option onSuccess callback and it provides expected user behaviour, but is this the most suitable pattern?

If that is not how I should go about this please advise. But in short, this pattern seems natural, my code is almost identical to the OPs original example.

[TkDodo]

once you set enabled: false, you opt out of many things. enabled: false basically means that the query is not ready to run. Lost of people use it conditionally, like: enabled: !!id to not fetch while the id is not there yet. It will automatically enable itself once id is ready.

Hence it is very much on purpose that invalidation skips disabled queries and this will not change.

For your case, you might also want to not set enabled to hardcoded false, but to a state value that changes from false to true once you click that button. See also lazy queries

[pdroid]

Hi! Contributing with our use case as well:

A query is enabled if the user has logged in, and disabled if logged out (i.e. enabled: !!user).

As there is no option to invalidate the data once it is disabled, the only sane approach was to move the enable-logic to the fetch method, returning the equivalent of invalidated data if the user is logged out, thus replacing the data.

This isn't a big headache, but it could also be avoided with an option invalidateOnPause.

[imagine10255]

In the case of query is enabled: false, but the user needs to log out and clear him, you can use this method

const qc = useQueryClient();
qc.resetQueries([ECacheKey.PROFILE_ME]);

Hope it helps someone who has the same problem as me

"@tanstack/react-query": "^4.28.0",

[yourcasualdev]

I don't think if there is anyone dumb like me encounters this mistake but I leave it for who does.

Apparently wagmi client has the same method useQueryClient and if you use something like VSCode auto import with pushing tab, you can mistakenly import Wagmi like

import {  useQueryClient  } from 'wagmi';

instead of

import {  useQueryClient  } from 'react-query';