// ProductList.jsx
import { useQuery } from '@tanstack/react-query';
 
const fetchProducts = async () => { /* ... Axios/fetch call ... */ };
 
const ProductList = () => {
  const { data: products, isLoading, isError } = useQuery({
    [cite_start]queryKey: ['products'], // এই কী খুবই গুরুত্বপূর্ণ [cite: 34]
    queryFn: fetchProducts,
    staleTime: 1000 * 60, // ১ মিনিট ডেটা fresh থাকবে
  });
 
  [cite_start]if (isLoading) return <div>Loading products...</div>; [cite: 39]
  [cite_start]if (isError) return <div>Error loading products!</div>; [cite: 39]
 
  [cite_start]// ... products.map করে লিস্ট দেখানো [cite: 40]
};

// AddProduct.jsx
import { useMutation, useQueryClient } from "@tanstack/react-query";
 
const addProduct = async (newProduct) => {
  /* ... POST request ... */
};
 
const AddProduct = () => {
  const queryClient = useQueryClient();
 
  const mutation = useMutation({
    mutationFn: addProduct,
    onSuccess: () => {
      [cite_start]; // প্রোডাক্ট লিস্টকে ইনভ্যালিডেট করে দেওয়া [cite: 14]
      queryClient.invalidateQueries({ queryKey: ["products"] });
    },
  });
 
  const handleSubmit = (productData) => {
    mutation.mutate(productData);
  };
  // ... ফরমের বাকি অংশ
};

// ProductItem.jsx
const useDeleteProduct = () => {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: deleteProduct, // API call to delete
    onMutate: async (deletedProductId) => {
      await queryClient.cancelQueries({ queryKey: ["products"] });
      const previousProducts = queryClient.getQueryData(["products"]);
      queryClient.setQueryData(["products"], (old) =>
        old.filter((p) => p.id !== deletedProductId)
      );
      return { previousProducts };
    },
    onError: (err, id, context) => {
      // ফেইল করলে আগের অবস্থায় ফিরে যাওয়া
      queryClient.setQueryData(["products"], context.previousProducts);
    },
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: ["products"] });
    },
  });
};
 
const ProductItem = ({ product }) => {
  const deleteMutation = useDeleteProduct();
  return (
    <button onClick={() => deleteMutation.mutate(product.id)}>Delete</button>
  );
};

// EditProduct.jsx
const updateProduct = async (updatedProduct) => { /* ... PUT request ... */ };
 
const useUpdateProduct = () => {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: updateProduct,
    onSuccess: (data) => {
      // প্রোডাক্ট লিস্ট এবং নির্দিষ্ট প্রোডাক্টের কোয়েরি ইনভ্যালিডেট করা
      queryClient.invalidateQueries({ queryKey: ['products'] });
      [cite_start]queryClient.invalidateQueries({ queryKey: ['product', data.id] }); // [cite: 56]
    },
  });
};