SamwithCode

useMutation Hook for Crud Operation 2025

useMutation Hook for CRUD Operation 2025

React Query ka useMutation hook use hota hai create, update aur delete jaise operations ke liye. Yeh server state ko mutate karta hai, aur saath mein loading, error aur success state handle karta hai.

1. Setup QueryClientProvider


// index.js ya App.js mein
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

2. Post/Create Data using useMutation


import { useMutation } from '@tanstack/react-query';
import axios from 'axios';

const addTodo = async (newTodo) => {
  const res = await axios.post('https://jsonplaceholder.typicode.com/todos', newTodo);
  return res.data;
};

function TodoForm() {
  const mutation = useMutation({
    mutationFn: addTodo,
    onSuccess: () => {
      alert('Todo added successfully!');
    },
    onError: () => {
      alert('Something went wrong!');
    }
  });

  const handleAdd = () => {
    mutation.mutate({ title: 'New Todo', completed: false });
  };

  return ;
}

3. Delete Data using useMutation


const deleteTodo = async (id) => {
  return axios.delete(`https://jsonplaceholder.typicode.com/todos/${id}`);
};

const mutation = useMutation({
  mutationFn: deleteTodo,
  onSuccess: () => console.log("Deleted"),
});

4. Update/Edit Data using useMutation


const updateTodo = async ({ id, updatedTodo }) => {
  return axios.put(`https://jsonplaceholder.typicode.com/todos/${id}`, updatedTodo);
};

const mutation = useMutation({
  mutationFn: updateTodo,
  onSuccess: () => console.log("Updated"),
});

Aap chahe to refetchQueries ya invalidateQueries ka use bhi kar sakte ho to refresh the data after mutation.