setQueryData

[innerstella]

기본 개념

• 쿼리 캐시의 데이터를 수동으로 업데이트하는 함수
• 서버 요청 없이 캐시를 직접 조작 가능

기본 사용법

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

function MyComponent() {
  const queryClient = useQueryClient();

  const updateCache = () => {
    // 직접 값을 설정
    queryClient.setQueryData(['todos'], [
      { id: 1, title: '할 일 1' },
      { id: 2, title: '할 일 2' }
    ]);
  };
}

주요 사용 예시

1. 낙관적 업데이트 시, 캐시를 미리 업데이트 할 때 & 실패 시 롤백할 때 사용

const { mutate } = useMutation({
  mutationFn: updateTodo,
  onMutate: async (newTodo) => {
    // 이전 데이터 백업
    const previousTodos = queryClient.getQueryData(['todos']);
    
    // 캐시를 미리 업데이트 (UI 즉시 반영)
    queryClient.setQueryData(['todos'], (old: Todo[]) => {
      return [...old, newTodo];
    });
    
    return { previousTodos };
  },
  onError: (err, newTodo, context) => {
    // 실패 시 롤백
    queryClient.setQueryData(['todos'], context.previousTodos);
  }
});

2. mutation 후 캐시 업데이트

[innerstella]

setQueryData vs invalidateQueries

• setQueryData: 캐시를 직접 수정 (서버 요청 X)
• invalidateQueries: 캐시를 무효화하고 다시 fetch (서버 요청 O)