Invalidations from Mutations

쿼리를 무효화하는 것은 전체 작업의 절반에 불과합니다. 쿼리를 무효화할 시점을 아는 것도 중요한 부분입니다. 일반적으로 앱에서 mutation이 성공하면, 그 mutation과 관련된 쿼리들이 무효화되고, 새롭게 변경된 내용을 반영하기 위해 다시 fetch할 필요가 매우 높습니다.

예를 들어, 새 todo를 추가하는 mutation이 있다고 가정해 보겠습니다:

const mutation = useMutation({ mutationFn: postTodo });

postTodo mutation이 성공적으로 실행되면, todos 쿼리들이 무효화되고, 새로운 todo 항목을 보여주기 위해 다시 fetch되는 것이 좋습니다. 이를 위해 useMutation의 onSuccess 옵션과 client의 invalidateQueries 함수를 사용할 수 있습니다:

import { useMutation, useQueryClient } from "@tanstack/react-query";
 
const queryClient = useQueryClient();
 
// 이 mutation이 성공하면 `todos`나 `reminders` 쿼리 키를 가진 모든 쿼리를 무효화합니다
const mutation = useMutation({
  mutationFn: addTodo,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ["todos"] });
    queryClient.invalidateQueries({ queryKey: ["reminders"] });
  },
});

무효화 작업은 useMutation 훅에서 제공하는 콜백을 통해 설정할 수 있습니다.

Query Invalidation Updates from Mutation Responses