RTK QueryIntermediate

Fetch Detail — useGetProductByIdQuery

Parameter-সহ query, skip option, derived loading — বাংলায়।

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

src/components/products/product-detail.tsxtsx

tsx

"use client";

import { useGetProductQuery } from "@/features/orders/ordersService";

export function ProductDetail({ id }: { id: string | null }) {
  // id === null → hook disabled (skip)
  const { data, isLoading, isError } = useGetProductQuery(
    id ?? "",
    { skip: id === null },
  );

  if (isLoading) return <ProductDetailSkeleton />;
  if (isError) return <ErrorMessage title="Product পাওয়া যায়নি" />;

  return (
    <article>
      <h2>{data?.name}</h2>
      <p className="text-muted-foreground">{data?.description}</p>
      <span className="font-semibold">{data?.price} টাকা</span>
    </article>
  );
}

Important options

Option	কাজ
`skip`	condition-এ fetch এড়িয়ে যায় (ওই arg null-able)
`refetchOnFocus`	window focus-এ refetch
`refetchOnReconnect`	নেটওয়ার্ক এলে refetch
`pollingInterval`	periodic refetch (ms)
`selectFromResult`	cache-থেকে নির্দিষ্ট অংশ pick

styles-এ relationts

// RTK Query-র arg থেকে URL-এ mapping
// (id: string) => "products/" + id
// query: (id) => "products/" + id

একই id পুনরায় fetch হয় না

মনে রাখুন — একই id-সহ hook একাধিক component-এ use করলে একটাই fetch, সবাই একই cache পায়। আর fetch শেষ হলে কোনো component unmount না করলে refetch হয় না — সেটাই cache-র সুবিধা।

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