TanStack Query 낙관적 업데이트: onMutate로 즉시 반영하고 onError로 자동 롤백하는 법

const mutation = useMutation({
  mutationFn: updateRowData,
 
  onMutate: async (newData) => {
    // 진행 중인 refetch가 낙관적 업데이트를 덮어쓰지 않도록 취소
    await queryClient.cancelQueries({ queryKey: ['grid-data'] });
 
    // 롤백을 위해 현재 상태 스냅샷
    const previousData = queryClient.getQueryData(['grid-data']);
 
    // 캐시를 즉시 업데이트 → 그리드가 바로 반영됨
    queryClient.setQueryData(['grid-data'], (old: Row[] = []) =>
      old.map((row) =>
        row.id === newData.id ? { ...row, ...newData } : row
      )
    );
 
    // context로 이전 상태 전달
    return { previousData };
  },
 
  onError: (err, newData, context) => {
    // context?.previousData로 캐시를 롤백 (context가 undefined일 수 있으므로 옵셔널 체이닝)
    queryClient.setQueryData(['grid-data'], context?.previousData);
  },
 
  onSettled: () => {
    // 성공이든 실패든 서버 상태와 최종 동기화
    queryClient.invalidateQueries({ queryKey: ['grid-data'] });
  },
});

// v5 변수 기반 낙관적 업데이트
const { mutate, isPending, variables } = useMutation({ mutationFn: updateItem });
 
const displayData = isPending
  ? data.map((item) =>
      item.id === variables.id ? { ...item, ...variables } : item
    )
  : data;

import { useMutation, useQueryClient } from '@tanstack/react-query';
import toast from 'react-hot-toast';
 
// Row 타입: { id: string; [key: string]: unknown }
function useGridRowUpdate(tableId: string) {
  const queryClient = useQueryClient();
 
  return useMutation({
    mutationFn: (updatedRow: Row) => api.updateRow(tableId, updatedRow),
 
    onMutate: async (updatedRow) => {
      await queryClient.cancelQueries({ queryKey: ['rows', tableId] });
 
      const snapshot = queryClient.getQueryData<Row[]>(['rows', tableId]);
 
      queryClient.setQueryData<Row[]>(['rows', tableId], (rows = []) =>
        rows.map((r) => (r.id === updatedRow.id ? updatedRow : r))
      );
 
      return { snapshot };
    },
 
    onError: (_err, _updatedRow, context) => {
      // context가 undefined일 수 있으므로 옵셔널 체이닝 사용
      queryClient.setQueryData(['rows', tableId], context?.snapshot);
      toast.error('저장에 실패했습니다. 변경사항이 되돌아갑니다.');
    },
 
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: ['rows', tableId] });
    },
  });
}

// Post 타입: { id: string; liked: boolean; likeCount: number; [key: string]: unknown }
function useLikePost() {
  const queryClient = useQueryClient();
 
  return useMutation({
    // isCurrentlyLiked: 현재 좋아요가 눌려있는 상태인지 여부 (누를 예정인 상태가 아님)
    mutationFn: ({ postId, isCurrentlyLiked }: { postId: string; isCurrentlyLiked: boolean }) =>
      isCurrentlyLiked ? api.unlikePost(postId) : api.likePost(postId),
 
    onMutate: async ({ postId, isCurrentlyLiked }) => {
      await queryClient.cancelQueries({ queryKey: ['post', postId] });
 
      const previousPost = queryClient.getQueryData<Post>(['post', postId]);
 
      queryClient.setQueryData<Post>(['post', postId], (old) => {
        if (!old) return old;
        return {
          ...old,
          liked: !isCurrentlyLiked,
          likeCount: isCurrentlyLiked ? old.likeCount - 1 : old.likeCount + 1,
        };
      });
 
      return { previousPost };
    },
 
    onError: (_err, { postId }, context) => {
      queryClient.setQueryData(['post', postId], context?.previousPost);
    },
 
    onSettled: (_data, _err, { postId }) => {
      queryClient.invalidateQueries({ queryKey: ['post', postId] });
    },
  });
}

// onMutate만 발췌 — onError와 onSettled는 앞선 예시와 동일한 구조
onMutate: async ({ draggedId, targetIndex }: { draggedId: string; targetIndex: number }) => {
  await queryClient.cancelQueries({ queryKey: ['items'] });
  const previousItems = queryClient.getQueryData<Item[]>(['items']);
 
  queryClient.setQueryData<Item[]>(['items'], (old = []) => {
    const reordered = [...old];
    const draggedIndex = reordered.findIndex((i) => i.id === draggedId);
    const [removed] = reordered.splice(draggedIndex, 1);
    reordered.splice(targetIndex, 0, removed);
    return reordered;
  });
 
  return { previousItems };
},