TanStackIntermediate

Data Fetching — useQuery

useQuery দিয়ে list ও detail fetch — params-dependent queries — বাংলায়।

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

এবার মূল অংশ — useQuery দিয়ে ডেটা আনা। আমরা hooks-এ queryKey ও queryFn আলাদা রাখব, যাতে page-এ শুধু state-গুলো (page, search, filter) দিলেই বাকি সব নিজে হয়।

src/lib/hooks/use-products.tsts

"use client";

import { keepPreviousData, useQuery } from "@tanstack/react-query";
import { listProducts } from "@/lib/products-api";
import { productKeys } from "@/lib/query-keys";


export function useProducts(params: ProductQueryParams) {
  return useQuery({
    queryKey: productKeys.list(params),
    queryFn: () => listProducts(params),
    // page/search বদলালে নতুন ডেটা আসা পর্যন্ত পুরনো দেখায়
    placeholderData: keepPreviousData,
  });
}

export function useProduct(id: string | null) {
  return useQuery({
    queryKey: productKeys.detail(id ?? "none"),
    queryFn: () => getProduct(id as string),
    enabled: id !== null,   // id না থাকলে query চলে না
  });
}

import { getProduct } from "@/lib/products-api";

keepPreviousData কী

page/search বদলালে TanStack Query পুরনো ডেটা দেখাতে থাকে নতুন আসা পর্যন্ত — এই UX কিছুটা smooth রাখে (pagination-এ ঝাঁকুনি কম)। ভেতরে নতুন fetch চলার সময় isFetching true থাকে।

params সাথে queryKey

queryKey-তে params অন্তর্ভুক্ত করায় page ১-এর ডেটা page ২-এর থেকে আলাদা cache-এ থাকে। user page ১-এ ফিরলে fetch ছাড়াই instant দেখায়। এটাই TanStack Query-র সবচেয়ে বড় সুবিধা।

একমাত্র data-উৎস

Component-গুলো useProducts থেকে data-ই পড়ে — API function-গুলো hooks-এ ঢেকে রাখলে UI কখনো জানে না ডেটা কোথা থেকে আসছে। Refactoring তখন তুচ্ছ।

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