공식문서 : https://tanstack.com/query/v4/docs/guides/invalidations-from-mutations

Invalidation from Mutations

쿼리를 무효화하는것은 절반에 불과하다. 언제 무효화할지 아는것이 나머지 절반에 해당한다. 일반적으로 앱의 mutation이 성공하면, mutation으로 인한 새로운 변경사항을 설명하기 위해 무효화하고 refetch해야하는 관련 쿼리들이 앱에 있을 가능성이 매우 높다.

예를 들어, 새 todo를 게시하는 mutation이 있다고 가정해보자 :

const mutation = useMutation(postTodo)

postTodo mutation이 성공적으로 발생하면 모든 todos 쿼리들이 무효화되고 새 todo 아이템을 표시하기 위해 refetch 되기를 원한다. 이렇게 하려면 useMutation의 onSuccess 옵션과 client의 invalidateQuries 함수를 사용할 수 있다 :

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(addTodo, {
  onSuccess: () => {
    queryClient.invalidateQueries(['todos'])
    queryClient.invalidateQueries(['reminders'])
  },
})

useMutation hook에서 사용가능한 콜백을 사용하여 무효화가 발생하도록 연결할 수 있다.