TanStackBeginner

QueryClientProvider সেটআপ

App-এ tanstack Query provider যুক্ত করা — client component ও root layout — বাংলায়।

8টি অংশবাংলা ভাষায়

QueryClient-কে পুরো app-এ পৌঁছে দিতে QueryClientProvider দিয়ে ঘিরে দিতে হয়। Next.js App Router-এ provider অবশ্যই client component হতে হবে — তাই আলাদা providers.tsx বানাব।

src/app/providers.tsx (client)tsx

tsx

"use client";

import { QueryClientProvider } from "@tanstack/react-query";
import { queryClient } from "@/lib/query-client";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <QueryClientProvider client={queryClient}>
      {children}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

Root layout-এ যোগ

src/app/layout.tsxtsx

tsx

import { Providers } from "./providers";

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

কেন client component

QueryClientProvider-এর ভেতরে React context, hooks, state ব্যবহার হয় — এসব Server Component-এ চলতে পারে না। তাই "use client" লাগে। তবে যুক্ত করার এটাই একমাত্র প্রভাব — বাচ্চারা Server Components-ই থাকতে পারে।

src/lib/query-client.tsts

import { QueryClient } from "@tanstack/react-query";

// important: মডিউল লেভেলে এক instance export
export const queryClient = new QueryClient({
  defaultOptions: {
    queries: { staleTime: 60_000, retry: 1 },
    mutations: { retry: 0 },
  },
});

প্রতি render-এ নতুন QueryClient না

কখনো component body-তে new QueryClient() লিখবেন না — প্রতি render-এ cache ভরে যাবে ও refetch বারবার হবে। মডিউল-লেভেল singleton বা useState(() => new QueryClient()) — দুইটাই চলবে; আমরা singleton নিলাম।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।