How to tell current data is from cache in useQuery (v3)?

[yann-combarnous]

I am using useQuery and want to display a loading indicator when:

• data is fetching
• no data is found in cache for current keys

So when the data is in cache (inactive), it will be displayed first and refreshed silently in the background.

But when it is not in cache, I want to be able to display a loading spinner.

I tried all the properties, but could not find any way to achieve this, help?

[TkDodo]

This really sounds like the default behavior of react query. isLoading should only be true on a „hard loading“ when there is no data on the cache

[yann-combarnous]

Sorry, did not explain properly my use case.

If I set keepPreviousData: true, isLoading is always false after first query is fetched.

[yann-combarnous]

So I am trying to do pagination with keepPreviousData: true, but would like to know when I am doing "hard loading", versus loading data from cache and refreshing it in background.

[TkDodo]

ah okay, yes, that info was missing. There is an isPreviousData property that will tell you if the data you are seeing is actually from the "previous" page. So isFetching && isPreviousData should do the trick :)

[yann-combarnous]

Thanks, this worked except for initial load, so it needs to be changed to isLoading || (isFetching && isPreviousData). It feels like a dedicated flag would be nice ;) .

[TkDodo]

I think the preferred solution would be a custom hook, where you can return this as a dedicated flag :)