뮤테이션에서의 무효화

쿼리를 무효화하는 것은 절반에 불과합니다. 쿼리를 언제 무효화해야 하는지 아는 것이 나머지 절반입니다. 일반적으로 앱의 뮤테이션이 성공하면 해당 뮤테이션의 새로운 변경 사항을 반영하기 위해 무효화하고 다시 가져와야 할 수도 있는 관련 쿼리가 애플리케이션에 있을 VERY 가능성이 높습니다.

예를 들어 새 할 일을 게시하는 뮤테이션이 있다고 가정합니다:

const mutation = useMutation({ mutationFn: postTodo })

postTodo 뮤테이션이 성공하면 모든 todos 쿼리를 무효화하고 새 todo 항목을 표시하도록 다시 가져오기를 수행하고 싶을 가능성이 높습니다. 이렇게 하려면 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: async () => {
    // If you're invalidating a single query
    await queryClient.invalidateQueries({ queryKey: ['todos'] })

    // If you're invalidating multiple queries
    await Promise.all([
      queryClient.invalidateQueries({ queryKey: ['todos'] }),
      queryClient.invalidateQueries({ queryKey: ['reminders'] }),
    ])
  },
})

onSuccess에서 Promise를 반환하면 뮤테이션이 완전히 완료되기 전에 데이터가 업데이트됩니다(즉, onSuccess가 이행될 때까지 isPending이 true입니다)

useMutation 훅에서 사용할 수 있는 콜백을 사용하여 무효화가 일어나도록 연결할 수 있습니다

추가 자료

뮤테이션 후 쿼리를 자동으로 무효화하는 기법은 TkDodo의 뮤테이션 후 자동 쿼리 무효화에 관한 글을 살펴보세요.