#Setting up QueryClientProvider

3 messages · Page 1 of 1 (latest)

analog mountain
#

Hello, I have problem with setting query client provider. The problem is that I get this error when I use it: Error: No QueryClient set, use QueryClientProvider to set one. Tried adding to layout.tsx <QueryClientProvider client={queryClient} /> from tanstack, but that didn't work. Then from what I understand I need to create _app.tsx? But even after creating it like this:

import "@/styles/globals.css";
import type { AppProps } from "next/app";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import RootLayout from "./layout";

const queryClient = new QueryClient();

export default function App({ Component, pageProps }: AppProps) {
  return (
    <QueryClientProvider client={queryClient}>
      <RootLayout>
        <Component {...pageProps} />
      </RootLayout>
    </QueryClientProvider>
  );
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Header />
        {children}
      </body>
    </html>
  );
}

It doesn't seem to work, not even sure if it's being used in the first place and if <RootLayout> is even necessary from layout.tsx. But overall a bit confused how to setup providers since in React would just wrap them around in App entry file.

waxen thornBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

supple quarry
#

Are you working in the App Router or Pages Router?