Do not return value from cache if query is disabled

[ksocha]

Hello 👋🏻

I have a following case:
There are multiple widgets on the page that use the same custom query hook.
Some of the widgets pass filters hash to queryKey array and use those filters as a part of actual GET request.
However, filters are being populated asynchronously, so some of the queries are disabled until the filters are ready.

The issue is: despite disabling some queries, there is still data being returned from the cache, which is not what the widget should render.

I've prepared a sandbox to better show this:
https://codesandbox.io/s/keen-grass-zqbmt1?file=/src/App.js

Notice how the data is being displayed:
Raw data is being fetched right at the start without any filters and properly displayed.
Filtered data takes data from cache and displays it, but this is not the data that should be shown there. After the filters are ready, the query is being refetched and proper data is being rendered.

The question is: is it possible to prevent taking data from the cache, if the query is disabled? In this case, I would expect isLoading to be true until the query is enabled again.

[TkDodo]

the problem is that you're observing the same key. it becomes apparent when you add the devtools. not-existing filters is the same as undefined filters.

If you split that apart, it works as expected: https://codesandbox.io/s/trusting-tess-sg4tll?file=/src/App.js

[ksocha]

conditional execution is still possible by moving the second query to a different component that you conditionally render.

While that's true, it's not applicable in my case, as the amount of changes needed would be simply too big.
Additionally, I would like to retain all status-related (isLoading, isError etc.) functionality that I get from useQuery ootb.

[rdecoito]

Although I think it's reasonable to point out that the key should be changing to observe a new cache entry, I think there's an intuitive behavior behind what ksocha is recommending here. In my head, disabled -> no data, so I use the enabled option as a way to tell useQuery, "I don't care what data is or is not here; I want to receive nothing back from this hook because I'm using the data somewhere down the line and it's important that it is undefined."

So perhaps there should be an opt-in configuration option like disabledReturnsUndefined that tells react-query to behave this way. I would definitely use it, because I want my cache manager to behave in the way that intuitively makes sense to me

[TkDodo]

So perhaps there should be an opt-in configuration option

If we added an option every time it was suggested, we'd have 500 options by now 😅 .

You can always choose to not read the data property when your observer is disabled, so I don't really get the problem:

cont enabled = ...
const myQuery = useQuer({ queryKey, queryFn, enabled })
const data = enabled ? myQuery.data : undefined

[rdecoito]

That's of course a very good reason to be wary of just throwing options in willy-nilly, I agree. But I think config options are inherently a bit more valuable when they concern significant behaviors of a library.

Your workaround is absolutely correct, as that is a valid way of getting the proposed behavior. But if someone wants that behavior, they probably want the entire library to work like that (not just in this component, and not just from useQuery). So copy-pasting that line after every useQuery (or, more sensibly, creating a new wrapper hook), isn't a good solution for library users because it's attempting to work around a default behavior that, for some, is not only unintuitive but also fundamental.

[kacetal]

So perhaps there should be an opt-in configuration option

If we added an option every time it was suggested, we'd have 500 options by now 😅 .

You can always choose to not read the data property when your observer is disabled, so I don't really get the problem:

cont enabled = ...
const myQuery = useQuer({ queryKey, queryFn, enabled })
const data = enabled ? myQuery.data : undefined

@TkDodo Unfortunately, It doesn't work because when query became enabled during loading it shows the old data for millisecond. And we have the loyeout blink especially if the new data after enebled is empty.