TanStackBeginner

TanStack Query Devtools

Devtools panel — cache, query state, refetch ও mutation inspection — বাংলায়।

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

ডেভেলপমেন্টের সেরা বন্ধু — ReactQueryDevtools। এটি ডান-নিচে ভাসমান button হিসেবে হাজির হয়; ক্লিক করলে query cache-এর ভেতর সব দেখা যায়।

providers.tsx-এ যোগtsx

tsx

"use client";

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

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <QueryClientProvider client={queryClient}>
      {children}
      {/* শুধু dev mode-এ */}
      {process.env.NODE_ENV === "development" && (
        <ReactQueryDevtools buttonPosition="bottom-right" />
      )}
    </QueryClientProvider>
  );
}

Devtools-এ কী দেখা যায়

প্রতিটি query-র key, state (fresh/stale/inactive), fetch count
ডেটা কখন lastUpdated — cache hit হওয়ায় fetch skipped হয়েছে কিনা
Query inspect → Refetch, Invalidate, Remove button
Mutations tab — চলমান/সমাপ্ত mutation ও variables
Explorer — queryKey ও data-র ভেতর দেখতে পারে

ভুলের অর্ধেক এখানেই

'ডেটা কেন নতুন হচ্ছে না?' লাগলে প্রথমে Devtools-এ ওই query-র state দেখুন — key মিলছে? stale? একটা fetch reload হয়েছে কিনা? কয়েক মিনিটেই motivation মিলে যাবে।

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