TanStackBeginner

TanStack Query Installation ও Setup

packages install, QueryClient তৈরি ও default options — বাংলায়।

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

Previous topic-এ packages install করে রেখেছি — এবার setup করি: QueryClient বানিয়ে options ঠিক করব।

Install (যা পরে)bash

bash

npm install @tanstack/react-query @tanstack/react-query-devtools

QueryClient কী?

QueryClient হলো TanStack Query-র 'brain' — এর ভেতরে cache, fetch logic, retry, stale time-এর মতো সবকিছু থাকে। App-টি একটি একমাত্র QueryClient ব্যবহার করে, এবং তা Provider-এর মাধ্যমে React tree-কে দেয়।

Default options

QueryClient configts

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

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60_000,        // ১ মিনিট 'fresh' থাকবে
      retry: 1,                 // ব্যর্থ হলে ১ বার retry
      refetchOnWindowFocus: false,
      gcTime: 5 * 60_000,       // ৫ মিনিট unused থাকলে GC
    },
    mutations: {
      retry: 0,                 // mutation-এ auto retry বন্ধ
    },
  },
});

Options-এর অর্থ

Option	মানে
`staleTime`	কতক্ষণ ডেটা fresh থাকবে — ব্যবহারকারী-প্রভাবিত refetch কমায়
`retry`	network/সার্ভার error-এ কতবার আবার চেষ্টা
`refetchOnWindowFocus`	tab-এ ফেরলে আবার fetch হবে কিনা
`gcTime`	cache-এ unused data কতক্ষণ থাকবে

Mutation-এ retry না

mutation (create/update/delete) auto-retry না করাই ভালো — নাহলে delete double-run হয়ে duplicate/doble operation হতে পারে। তাই mutations: { retry: 0 }।

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