queryCache only available through {useQueryCache} and not {queryCache}

[RWTloopesko]

I'm trying access the query cache so that I can use the getQueryData() and setQueryData() methods during optimistic UI updates. When I try to access the query cache by using import {queryCache} from "react-query" then getQueryData is always undefined for my query even though I can see that the query exists in the dev tools. I also get undefined in the "old value" parameter of the updater function. However, if I instead access the cash by first importing the useQueryCache hook and then defining a cache from that hook then I can access my data from the getQueryData() method with no problem. Why would accessing the data by importing queryCache (the way that it's described in the documentation) result in undefined when doing it the other way works just fine?

I've spent several hours googling and haven't found anyone else that seems to have experienced this which leads me to believe that I must be doing something but I can't figure out what it might be since I've check and rechecked the documentation and everything seems to be right

[tannerlinsley]

You need to use one or the other. If you choose to use the global queryCache that is exported from React Query (which has been deprecated), then you should not use the queryCacheProvider and useQueryCache

If you use the suggested cache provider, you need to do it like this:

const queryCache = new QueryCache()

function App () {
  return <QueryCacheProvider queryCache={queryCache}/>
}

function Comp () {
  const queryCache = useQueryCache()
}

If you need to use the queryCache in a non-react location, then you can export the queryCache you made and import it there:

const queryCache = new QueryCache()

...

import queryCache from '../index.js'