[TanStakQuery] Invalidations from Mutations

쿼리를 invalidating하는 것은 전투의 절반에 불과합니다. 언제 invalidate 하는지 아는 것이 나머지 절반입니다. 일반적으로 앱에서 변경이 성공하면 애플리케이션에 mutation으로 인한 새로운 변경 사항을 고려하여 invalidate하고 refetch해야 하는 관련 쿼리가 있을 가능성이 매우 높습니다.

예를 들어 새 할 일을 post하는 mutation이 있다고 가정해 보겠습니다:

const mutation = useMutation({ mutationFn: postTodo })

포스트 할 일 mutation이 성공하면 모든 할 일 쿼리가 invalidated되고 새 할 일 항목이 표시되도록 refetched되길 원할 수 있습니다. 이를 위해 useMutation의 onSuccess 옵션과 client의 invalidateQueries 함수를 사용할 수 있습니다:

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

const queryClient = useQueryClient()

// When this mutation succeeds, invalidate any queries with the `todos` or `reminders` query key
const mutation = useMutation({
  mutationFn: addTodo,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['todos'] })
    queryClient.invalidateQueries({ queryKey: ['reminders'] })
  },
})

useMutation 훅에서 사용 가능한 콜백 중 하나를 사용하여 invalidations가 발생하도록 설정할 수 있습니다.

Reference

• Invalidations from Mutations | TanStack Query Docs