preFetchQuery cached data isn't being used and data is 'inactive'

[jschuur]

In a Next.js 13.4.1 app directory app, I'm doing a prefetch of data in a client side component and then query the same key in a click interaction, but this seems to fetch the same data again over the network instead of use the cache, according to the browser's network activity tab.

My prefetch sets stale/cachTime to Infinity:

      queryClient.prefetchQuery({
        queryKey: audioQueryKey(cards[0]),
        queryFn: () => fetch(audioUrl(cards[0])),
        staleTime: Infinity,
        cacheTime: Infinity,
      });

After both fetches, the React Query devtools show that key as 'inactive'. I can see the state go from inactive to fetching on click and then on any subsequent, it's clearly accessing the cache.

In the network tab, I can see a request for '41' at 13k in FlashCardList (the prefetch), but another on click in useAudio for the same size, so it didn't use the cache. When I click again, it dos get it from the cache though (the second 'blob:' entry):

How would I debug this further? All of the relevant preFetch and useQuery work is done in client components (although I do also hydrate data set at the server).

I'm currently on Tanstack Query v4.29.5. Details from the devtools:

[jschuur]

Looks like at least one problem was that I thought my use client query would never run on the server. my prefetching was happening at build time in a separate queryClient instance on the server that never made it to the client.

Problem fixed after I defered prefetching until the component actually mounted on the client side.