Question about interaction of the queryClient instance with the React Query Devtools cache view when using Jotai Atoms

[juse122]

Hello, I'm using Jotai together with Tanstack Query and Tanstack's React Query Devtools, and I just can't figure out how to use both the "default" queryClient of Tanstack Query that I instantiate by using

const queryClient = new QueryClient()

and the full functionality of the React Query Devtools when using the Jotai Atoms atomWithQuery or atomWithMutation for querying.

While the caching works as expected, I can't see any cache entries in the Devtools and also can't interact with the cache with methods like queryClient.getQueryCache() or queryClient.invalidateQueries().

But the strangest thing about all this is that when I instead use the queryClientAtom that comes with the jotai-tanstack-query library via

const queryClient = useAtomValue(queryClientAtom) as unknown as QueryClient

then the Devtools work perfectly fine and I can see all cache entries and use said methods.

The app is purely frontend without any server components and stuff, and has a functioning Providers wrapper component around the app component and my Jotai Atoms are also defined outside the app in separate files.

This is the Provider setup thats currently working:

const Providers = ({ children }: ProvidersProps) => {
  const queryClient = useAtomValue(queryClientAtom) as unknown as QueryClient

  return (
    <BrowserRouter>
      <ThemeProvider theme={theme}>
        <QueryClientProvider client={queryClient}>
          <Provider>
              <CssBaseline />
              {children}
          </Provider>
          <ReactQueryDevtools initialIsOpen={false} />
        </QueryClientProvider>
      </ThemeProvider>
    </BrowserRouter>
  )
}

The <Provider> is the Jotai Store Provider, but it doesn't seem to do anything in my setup, as removing it doesn't have an impact on the cache and Devtools. I'm probably using that one wrong :)

Ultimately, I'd very much like to use the default Tanstack queryClient so that I can define global cache and query settings.

Sadly the Jotai documentation touches the topic of queryClients only very briefly, so I'm not sure if I'm just missing something obvious that is setup-related or if it's something else.

Thank you and Best regards,
Jules

[rothsandro]

As mentioned in the docs:

[...] be sure to wrap the root of your project in a <Provider> and initialise queryClientAtom with the same queryClient value you provided to QueryClientProvider.

There is also an example that shows you how to do it. You can use useHydrateAtoms to initialize the queryClientAtom with your custom query client:

const queryClient = new QueryClient()

const HydrateAtoms = ({ children }) => {
  useHydrateAtoms([[queryClientAtom, queryClient]])
  return children
}

export const App = ({ children }) => {
  return (
    <QueryClientProvider client={queryClient}>
      <Provider>
        <HydrateAtoms>
          {children}
        </HydrateAtoms>
      </Provider>
    </QueryClientProvider>
  )
}

[rothsandro]

Hm, interesting 🤔 What packages and versions did you have installed? You should only need @tanstack/react-query and jotai-tanstack-query. React Query automatically installs the corresponding version of the @tanstack/query-core package so this should always match (unless you installed this separately, which I would not recommend) and Jotai TanStack Query accepts any version of @tanstack/query-core so it will just use the one already installed. Unless there was some weird problem with the lock file or legacy peer deps or whathever it shouldn't result in a type mismatch.

[tatwater]

This last comment saved me! The setup instructions for working with TS Query say to install query-core but then I was getting type errors on useHydrateAtoms() – I bet the core I installed fresh had different type defs than the older version of query I had in my project!

[juse122]

Hm, interesting 🤔 What packages and versions did you have installed? You should only need @tanstack/react-query and jotai-tanstack-query. React Query automatically installs the corresponding version of the @tanstack/query-core package so this should always match (unless you installed this separately, which I would not recommend) and Jotai TanStack Query accepts any version of @tanstack/query-core so it will just use the one already installed. Unless there was some weird problem with the lock file or legacy peer deps or whathever it shouldn't result in a type mismatch.

Its quite the long-running project, so I guess the packages were approx. 6-9 months old. What @tatwater said was probably the main problem: different versions of react-query and query-core that had different type definitions.

[rothsandro]

I suggest to change the docs to let the user install @tanstack/react-query instead of the core package. The rest of the docs page uses React components anyway and some code snippets even use @tanstack/react-query. @dai-shi Is that ok for you?

[dai-shi]

I'd prefer the core package with base examples. Maybe, we should split the section into two and move react dependency to the later section only. @kalijonn what do you think?