RTK QueryIntermediate

Mutation: Update ও Delete (Admin)

Product-এর update/delete mutation ও tag-based refresh — বাংলায়।

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

admin/product-actions.tsxtsx

tsx

"use client";

import {
  useDeleteProductMutation,
  useUpdateProductMutation,
} from "@/features/products/productsService";

export function ProductActions({ product }: { product: Product }) {
  const [deleteProduct, { isLoading: isDeleting }] = useDeleteProductMutation();
  const [updateProduct, { isLoading: isUpdating }] = useUpdateProductMutation();

  function toggleStatus() {
    updateProduct({
      id: product.id,
      body: { status: product.status === "active" ? "inactive" : "active" },
    });
  }

  function handleDelete() {
    // disabled-loading-সহ confirm প্যাটার্ন
    AlertDialog.confirm({
      title: "Delete product?",
      onConfirm: () => deleteProduct(product.id),
    });
  }

  return (
    <div className="flex gap-2">
      <Button variant="outline" onClick={toggleStatus} disabled={isUpdating}>
        আপনার status খারিজ
      </Button>
      <Button variant="destructive" onClick={handleDelete} disabled={isDeleting}>
        Delete
      </Button>
    </div>
  );
}

invalidation দিয়ে auto-refresh

আমাদের আগের tags setup-এ update/delete → invalidatesTags → সংশ্লিষ্ট সব query (list + detail) auto-refetch। তাই useGetProductsQuery-থেকে আর কোনো manual call দরকার হয় না।

partially এ update

optimistic option (দেখা যাবে) ts

updateProduct({
  id: product.id,
  body: { stock: 0 },
  // onSuccess/onError hook-up এখানে
});

এক mutation-এ সব

Mutations সবসময় server-সত্য-ভিত্তিক — invalidate করে client cache re-fetch। সার্ভার প্রত্যাখ্যান করলেও UI ভুল নয় — refetch হয়ে ঠিক হয়ে যাবে।

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