TanStackIntermediate

Delete Mutation

DELETE request, confirmation dialog ও cache update — বাংলায়।

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

Delete-এ প্রধান কথা — দুর্ঘটনা আটকানো (confirmation) আর cache থেকে সরানো। দেখি সহজ ও দ্ব্যর্থক-মুক্ত delete mutation।

use-product-mutations.ts (add)ts

export function useDeleteProduct() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (id: string) => deleteProduct(id),

    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: productKeys.all });
      toast.success("Product মুছে ফেলা হয়েছে");
    },

    onError: (error) => toast.error(error.message),
  });
}

Confirm dialog-এ delete

Delete hook ব্যবহারtsx

tsx

const deleteProduct = useDeleteProduct();

function confirmDelete() {
  deleteProduct.mutate(product.id, {
    onSuccess: () => {
      setOpen(false);        // alert dialog বন্ধ
    },
  });
}

// alert-dialog-এর confirm button
<Button
  variant="destructive"
  disabled={deleteProduct.isPending}
  onClick={confirmDelete}
>
  {deleteProduct.isPending ? "মুছে ফেলা হচ্ছে…" : "Delete"}
</Button>

নোট: delete-এর পরে

সব variant invalidate করলে ফিল্টার/পেজ যাই থাকুক cache সঠিক থাকে
optimistic delete চাইলে পরের অধ্যায়ে দেখব
DELETE-এর response-এ সাধারণত body থাকে না — deleteProduct returns void

সবসময় confirm

Delete-কমন action — confirm dialog ছাড়া কখনো দিরে instant delete button দেবেন না, বিশেষত production dashboard-এ। পরের অধ্যায়ে পুরো delete-confirmation dialog বানাব।

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