TanStackIntermediate

Create Mutation — New Product

useMutation দিয়ে নতুন product তৈরি এবং onSuccess-এ cache refresh — বাংলায়।

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

Queries পড়ে, mutations লেখে। useMutation দিয়ে POST চালাব; সফল হলে list query invalidate করে — table নিজে থেকেই refresh হয়।

src/lib/hooks/use-product-mutations.tsts

"use client";

import { useMutation, useQueryClient } from "@tanstack/react-query";
import { toast } from "sonner";
import { createProduct } from "@/lib/products-api";
import { productKeys } from "@/lib/query-keys";


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

  return useMutation({
    mutationFn: (input: CreateProductInput) => createProduct(input),

    onSuccess: () => {
      // list cache পুরনো হয়ে গেছে → আবার fetch
      queryClient.invalidateQueries({ queryKey: productKeys.all });
      toast.success("Product তৈরি হয়েছে");
    },

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

Component-এ ব্যবহার

Form submit-এtsx

tsx

const createProduct = useCreateProduct();

function handleSubmit(values: CreateProductInput) {
  createProduct.mutate(values, {
    onSuccess: () => {
      onClose?.();   // dialog বন্ধ
      form.reset();  // পরের create-এর জন্য ফরম পরিষ্কার
    },
  });
}

// button loading
<Button disabled={createProduct.isPending}>
  {createProduct.isPending ? "সেভ হচ্ছে…" : "Create Product"}
</Button>

mutation কীভাবে কাজ করে

mutate(input) → mutationFn(input) → Axios POST
চলাকালে isPending true — UI-তে loading দেখায়
সফল → onSuccess → list invalidate → toast
ব্যর্থ → onError → error message

onSuccess≠cache guarantee

onSuccess shared হয়। ভেতরে যেহেতু আমরা queryClient.invalidateQueries করি — ডেটা সার্ভার থেকে আসা নিশ্চিত হয়। তাতে user-এর screen সবসময় server-এর সত্যিই latest উপস্থিতি দেখায়।

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