Context for the enabled: false behaviour

[mrlubos]

Hey there! Apologies if this has been already discussed, but I am looking for the context behind the behaviour of the enabled flag. I understand that this code

const { data } = useQuery('key', () => fetchData(), {
  enabled: false,
})

will result in data equal to undefined. However, if we call the same query from another component, data will be defined as it will become available in the cache.

I am confused by this behaviour because when I decide to disable a query, I do it for a good reason. It's not only that I might not have enough information to make the fetchData() call, I also don't want to use data in such instances at all.

Can you please explain to me a use case where it's desirable to use data from cache if I set enabled to false? I am inclined to propose changing this behaviour, but wanted to open a discussion first as I assume there's a reason why it works this way.

[TkDodo]

enabled is an option that works on the observer level - so it can be different for each useQuery instance. It just says that when used in this component, it will not trigger any data fetching. Of course, if data gets into the cache by any other means, e.g. because you fetch it manually, or because you call setQueryData for example, you will still get data even if the observer is disabled, because data in the cache will always be delivered to consumers.

Tbh, I've never seen a use-case where you'd enabled one and disable another observer of the same query. At least not on the same page, mounted at the same time. Maybe there is one, not really sure. By using custom hooks, you likely won't get into that situation though unless you want to :)

[mrlubos]

Thank you. Your explanation helped me discover a bug which I believe was the reason I observed this behaviour. Understanding the implementation, I'll know the next time to go bug hunting straight away! 😃