No way to know if the data was served from cache.

[vipinnair22]

Currently there's no property in the response object which tells me if the data was served from cache or if it had to execute the queryFn to return the response.
IIRC, previous version had an isCached flag which provided this information.
I tried to use isFetched flag. But it's set to true in both cases.
Is there something in the response object that can be used to determine if the data was served from cache?

[TkDodo]

I don’t think so. What do you need it for?

[vipinnair22]

Mostly for telemetry. To understand cache utilization and misses.

[ewfian]

same question here

[TkDodo]

A cache miss is shown when a query goes into loading state. If you mount a new component and it gets data immediate from the cache, it will be in success state.

[TkDodo]

writing data to the cache is the same as fetching it, there's no difference. React Query doesn't keep track where data is coming from - all data is treated equally.

When you optimistically update, you can just add an isOptimistic: true flag to that entry and then you't know by checking that ...

[urielbitton]

so why is my data always in isLoading = true for a second then changes to false?

[TkDodo]

not sure, how should I know? One guess is:

https://tkdodo.eu/blog/react-query-fa-qs#2-the-queryclient-is-not-stable

But really, I can't see into your head and guess what you might've done wrong in your code, so please just show a minimal, runnable reproduction...

[urielbitton]

React Component:
const { data: article, isLoading: articleLoading } = useQuery({
    queryKey: ["article", slug],
    queryFn: () => fetchArticleBySlug(slug),
  });
  
fetchArticleBySlug function (firebase fetch):
export const fetchArticleBySlug = async (slug: string) => {
  const articlesRef = collection(db, "articles");
  const q = query(articlesRef, where("slug", "==", slug), limit(1));
  const article = (await getDocs(q)).docs[0].data();
  return article;
};

[TkDodo]

this isn't a minimal, runnable reproduction 🤷

[vukadinFE]

Hi @TkDodo.
There is a use case for which I'd like to get a callback for data change with param if it's coming from cache or not.
My BE API is persisting filters on the get items endpoint, so when I refresh the page, I am first getting those persisted filters and using them as query keys in useInfiniteQuery to get items. So once I get settled everything, filtering out the items that already exist in the cache returns me items instantly, which is perfect, but because the API endpoint isn't called, the filters are not persisted.
Therefore I got a dedicated endpoint to persist filters manually, and now I call it every time filters are changed, but because the get items endpoint already persists filters it's redundant to call the persist manually. So it would be perfect if there is a callback that fires only when the data is coming from the cache so I can just then manually update filter persistence.

It's a specific case, but I guess this kind of flexibility would benefit developers.

[n8tb1t]

something like this will work

import type { UseQueryResult } from '@tanstack/react-query'
import { useLayoutEffect, useMemo, useRef } from 'react'

export const useReactQueryEnhancedState = <Data>(
  transaction: UseQueryResult<Data>
) => {
  const fetched = useRef(false)

  useLayoutEffect(() => {
    if (transaction.isLoading) {
      fetched.current = true
    }
  }, [transaction.isLoading])

  const ready =
    !transaction.isStale &&
    transaction.isSuccess &&
    transaction.data !== undefined

  return useMemo(
    () =>
      [
        {
          ready,
          cache: ready && !fetched.current,
          data: transaction.data,
          exception: transaction.error
        },
        transaction.refetch
      ] as const,
    [ready, transaction.data, transaction.error, transaction.refetch]
  )
}

=====
export const useRolesQuery = (enabled: boolean = false) =>
  useReactQueryEnhancedState(
    useQuery({
      ...fetchRoles.query,
      staleTime: FIVE_MINUTES,
      refetchInterval: FIVE_MINUTES,
      retryDelay: (failureCount) => failureCount * 500,
      retry: 3,
      retryOnMount: false,
      refetchOnMount: false,
      enabled
    })
  )
  
  ===
  const [{cache: true if served from cache}] = useRolesQuerty()

[vukadinFE]

Hey @n8tb1t thanks for an idea.
This workaround depends on the data change, which is good, but a different set of filters could result in the same set of data.
I was thinking more about an additional method that TanStack can provide, for example, onDataServe with the data, key and network/cache (boolean) in a payload.