Next.js Discord

Discord Forum

Setting up QueryClientProvider

Unanswered
Stephens Stock posted this in #help-forum
Open in Discord
Stephens StockOP
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.

2 Replies

Horned oak gall
Are you working in the App Router or Pages Router?
nahuelluca
Hey if you use App router you can read my post: https://nahuel-dev.pages.dev/blog/client-side-data-fetching-next

This have one example where implementing nextjs (app router) with TanStack Query