ratty-blush

Passing QueryClient but still getting `No QueryClient set, use QueryClientProvider to set one

export default function MainLayout({ children }: { children: React.ReactNode }) {
  const { state, send } = useAuth();

  useEffect(() => {
    console.log(state.context);
    console.log(send);
  }, [state]);

  console.log(children);

  return (
    <>
      <div className=" absolute inset-0 bg-[url(/grid.svg)] dark:bg-black dark:bg-[url(/whitegrid.svg)]">
        <HelmetProvider context={helmetContext}>
          <NextUIProvider>
            <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
              <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
            </ThemeProvider>
          </NextUIProvider>
        </HelmetProvider>
      </div>
    </>
  );
}

export default function MainLayout({ children }: { children: React.ReactNode }) {
  const { state, send } = useAuth();

  useEffect(() => {
    console.log(state.context);
    console.log(send);
  }, [state]);

  console.log(children);

  return (
    <>
      <div className=" absolute inset-0 bg-[url(/grid.svg)] dark:bg-black dark:bg-[url(/whitegrid.svg)]">
        <HelmetProvider context={helmetContext}>
          <NextUIProvider>
            <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
              <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
            </ThemeProvider>
          </NextUIProvider>
        </HelmetProvider>
      </div>
    </>
  );
}

export const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
  return (
    <MainLayout>
      <MainNavBar />
      {children}
    </MainLayout>
  );
};

export const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
  return (
    <MainLayout>
      <MainNavBar />
      {children}
    </MainLayout>
  );
};

7 Replies

typical-coral•3y ago

Could you give us some more context or info about the problem you are facing? 1. Are you using Tanstack Router in a SPA or in server-side rendering? 2. Is the query client stable? (Are you doing new QueryClient() inside a component? or outside of a component?) 3. If it is a SPA, have you made sure to render the RouterProvider after the QueryClientProvider?

ratty-blushOP•3y ago

@Sean Cassiere posted in the wrong channel

typical-coral•3y ago

Cool stuff!

ratty-blushOP•3y ago

@Sean Cassiere im not using tanstack router, im using react router 6 and the problem is on the login page its working fine but as soon as i move to /dashboard page it breaks and throws an error should i ask for help in query channel? and delete the post here 1. Not using tanstack router and using client side rendering 2. Outside component 3. dont know how to confirm that but it seems to work fine on login router but crashed on dashboard

const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Hello world!</div>,
  },
  {
    path: "/login",
    element: (
      <AuthProvider>
        <MainLayout>
          <LoginPage />
        </MainLayout>
      </AuthProvider>
    ),
  },
  {
    path: "/dashboard",
    element: (
      <AuthProvider>
        <DashboardLayout>
          <DashboardPage />
        </DashboardLayout>
      </AuthProvider>
    ),
    children: [
      {
        path: "/dashboard/:workspace",
        element: <Outlet />,
      },
    ],
  },
]);

const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Hello world!</div>,
  },
  {
    path: "/login",
    element: (
      <AuthProvider>
        <MainLayout>
          <LoginPage />
        </MainLayout>
      </AuthProvider>
    ),
  },
  {
    path: "/dashboard",
    element: (
      <AuthProvider>
        <DashboardLayout>
          <DashboardPage />
        </DashboardLayout>
      </AuthProvider>
    ),
    children: [
      {
        path: "/dashboard/:workspace",
        element: <Outlet />,
      },
    ],
  },
]);

typical-coral•3y ago

You'll want to confirm this stuff in the #react-query-questions channel? Basically you want the setup to look something like this. app.tsx

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
// import { createBrowserRouter, RouterProvider } from "#router-package-name";
const router = createBrowserRouter({ /** Your routes here */ })

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>
  )
}

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
// import { createBrowserRouter, RouterProvider } from "#router-package-name";
const router = createBrowserRouter({ /** Your routes here */ })

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>
  )
}

Here's the example repo with react-router in the Tanstack Query docs - https://github.com/TanStack/query/blob/beta/examples/react/react-router/src/index.jsx

GitHub

query/examples/react/react-router/src/index.jsx at beta · TanStack/...

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query. - TanStack/query

typical-coral•3y ago

If this doesn't fix it as Dom said, you may want to get a codesandbox or stacklitz sample running so he could look at it. https://discord.com/channels/719702312431386674/1158692457857417267

ratty-blushOP•3y ago

thank you, fixed it

Gaming

Programming

Passing QueryClient but still getting `No QueryClient set, use QueryClientProvider to set one

Did you find this page helpful?