T
TanStack•3y ago
like-gold

loading multiple component break the react query and throws an error 'QueryClient is not set'

{
 path: ":project",
 loader: projectDataloader(queryClient),
 element: (
 <DashboardLayout>
 <ProjectDashboardPage />
 <PerformanceConfig />
 </DashboardLayout>
 ),
 },
{
 path: ":project",
 loader: projectDataloader(queryClient),
 element: (
 <DashboardLayout>
 <ProjectDashboardPage />
 <PerformanceConfig />
 </DashboardLayout>
 ),
 },
using react router. if remove the component <PerformanceConfig /> it start working but if add it start throwing an error, how to configure react query so i can use react query within multiple component and do there data loading with in that component
6 Replies
helpful-purple
helpful-purple•3y ago
where is your QueryClientProvider located ?
like-gold
like-goldOP•3y ago
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>
  </React.StrictMode>
);
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>
  </React.StrictMode>
);
main.tsx file
helpful-purple
helpful-purple•3y ago
should work; show a reproduction please
like-gold
like-goldOP•3y ago
@TkDodo 🔮 it throws an error when i import it from import { useQuery } from "react-query"; but works fine import { QueryClient, useQuery } from "@tanstack/react-query"; 🥲
helpful-purple
helpful-purple•3y ago
of course it does, they are different packages ...
like-gold
like-goldOP•3y ago
ohh i see i installed both by mistake

Did you find this page helpful?