Why providing queryClient as context

I have a question about the use of queryClient and providing it to the

createRouter

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

QueryClientProvider

and additional inside the router? What are the benefits of not using

queryClient

queryClient

directly inside of layouts/routes and

useQueryClient

useQueryClient

inside components?

TanStack•2y ago•

2 replies

ordinary-sapphire

Why providing queryClient as context

I have a question about the use of queryClient and providing it to the

createRouter

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

QueryClientProvider

and additional inside the router? What are the benefits of not using

queryClient

queryClient

directly inside of layouts/routes and

useQueryClient

useQueryClient

inside components?

Why providing queryClient as context

Similar Threads

Why providing queryClient as context

Similar Threads

Similar Threads

Similar Threads