CODEWITHSUNDEEP
next.jsreact-query
james emanon
james emanon

Reputation: 11807

Why can't I use QueryCache to get at "cache" from queryClient.prefetchQuery

So, I am trying to access the cache that I set with: queryClient.prefetchQuery, in a SSR page.

I am using this on the SSR side that I hydrate:

ala:
  await queryClient.prefetchQuery(['userSesion'], () => fetchUserSession());

// This is wrapping my _app.js file

  <QueryClientProvider client={queryClient}>
    <Hydrate state={props.dehydratedState}>

Then on the client side, I am trying to get at this "cache".

  const queryCache = new QueryCache();
  queryCache.find("userSession"); // <--- This is undefined/empty

Also tried: no luck

  queryClient.getQueryData('userSession'))
  queryClient.getQueryState('userSession'))

Mind you, I "SEE" the data/cache in the tools, so why can't I get at it? enter image description here

Upvotes: 2

Views: 2665

Answers (1)

TkDodo
TkDodo

Reputation: 28813

because you create a new Cache, and that cache has no connection to the queryClient. If you want to get the cache, you can do this via:

const queryClient = useQueryClient()
const queryCache = queryClient.getQueryCache()

that being said, there should be rarely the need to interact with the QueryCache directly. The QueryClient exposes functions to interact with the cache, and if you have a component that needs data from the cache, it's always preferred to just call useQuery in that component. It will give you data from the cache instantly if there is any, and perform a background refetch if the data is considered stale.

Upvotes: 1

Related Questions