Why providing queryClient as context

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

createRouter

createRouter

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>,
  )

//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

QueryClientProvider

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

queryClient

queryClient

queryClient

queryClient directly inside of layouts/routes and

useQueryClient

useQueryClient

useQueryClient

useQueryClient inside components?

Why providing queryClient as context

Similar Threads

Similar Threads

Similar Threads