How can I distinguish between fetching due to the query key or due to the stale time?

[gandhis1]

The context is, I want to show a loading indicator when someone changes an input and thus invalidates the query key. I do NOT want to show this loading indicator when the data is just stale per the stale time - effectively distinguishing between deliberate updates and background updates.

How can I do this? It's not obvious to me from the docs how I can make this distinction.

[TkDodo]

you're conflating terms here. isStale is always measured by staleTime (or manual invalidation). A key change doesn't make the query data stale - it changes to a completely different cache entry.

I'd need to see some code to understand what you are trying to achieve ...

[gandhis1]

isStale was probably wrong property to reference here. Maybe "fetching" would have been the right term there. Here are 3 states of my application:

1. Query first runs - isLoading is true, isFetching is true, I use isLoading to turn on and off a loading indicator
2. Query key changes - isLoading is false, isFetching is true. I can no longer use isLoading to drive that indicator.
3. Query becomes stale - isFetching is also true

I may have this mixed up, but to simplify the question - how can I distinguish between state 2 and state 3 with any property available in the UseQueryResult object?

[TkDodo]

Query key changes - isLoading is false,

on a query key change, isLoading will be true unless there is data already available for that query. It's equivalent to "query first runs"

Query becomes stale - isFetching is also true

we don't refetch just because the query becomes stale

how can I distinguish between state 2 and state 3 with any property available in the UseQueryResult object?

It would still be better if you A) showed some code or B) would ask for the use-case you're trying to solve. This looks like an xy question.

[gandhis1]

Here is the query, with certain parts removed:

  const queryResult = useQuery(
    ["someQuery", asOfDate],
    async () => ...,
    {
      enabled: ...,
      staleTime: 300_000, // 5 minutes
      keepPreviousData: true,  // Perhaps this is the problematic setting? (but I'd like to keep it)
    }
  );

And this is the variable I need:

 // What combination of isLoading, isFetching, etc. is appropriate here?
 const isRefreshingDueToInitialLoadOrQueryKeyChangeButNotStaleTime = ...  

[TkDodo]

You haven't mentioned that you are using keepPreviousData, so ...

isPreviousData is likely what you are looking for. This flag is set to true while you are seeing data from a previous query key.

[satyam-mishra-pce]

I can't find isPreviousData flag when using useQuery. Was that removed in the later versions? What is the new solution then?

[TkDodo]

isPlaceholderData

[satyam-mishra-pce]

isPlaceholderData

Thanks. I have a question. Will it just work out of the box?
I mean, I just want to know if the data is from an older key, so if I directly use isPlaceholderData and check if it is false, will it work? Or would I need to do some extra set up or wizardry, like

const { } = useQuery({
// other configs
placeholderData: undefined
})

Sorry if it sounded silly, but tbh the docs were pretty vague about it.

[TkDodo]

you need to specify placeholderData. Please see: https://tanstack.com/query/latest/docs/framework/react/guides/paginated-queries#better-paginated-queries-with-placeholderdata