T
TanStack•14mo ago
other-emerald

Why providing queryClient as context

I have a question about the use of queryClient and providing it to the createRouter context. I wonder why should a user do that? The entire app inclusively the router can use the queryClient directly? 
//https://tanstack.com/router/latest/docs/framework/react/examples/basic-react-query-file-based
  const root = ReactDOM.createRoot(rootElement)
  root.render(
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>,
  )
//https://tanstack.com/router/latest/docs/framework/react/examples/basic-react-query-file-based
  const root = ReactDOM.createRoot(rootElement)
  root.render(
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>,
  )
Is it not doubled to provide the context of queryClient in both, the QueryClientProvider and additional inside the router? What are the benefits of not using queryClient directly inside of layouts/routes and useQueryClient inside components?
2 Replies
plain-purple
plain-purple•14mo ago
you can't call useQueryClient in the route loaders
other-emerald
other-emeraldOP•14mo ago
Hi @TkDodo 🔮 thanks for your input. I know that useQueryClient is not available, but I can import the queryClient, wouldn't that be the same thing as providing the queryClient to the context of the router?

Did you find this page helpful?