6. Mutations - 무효화

일반적으로 뮤테이션을 통해서 데이터의 CUD가 발생하면 새로운 변경 분을 조회하기 위해 데이터를 가져와야 하는 쿼리가 어플리케이션에 있을 가능성이 매우 높습니다.

 const mutation = useMutation(postTodo);

postTodo mutation 이 성공적으로 실행되면 모든 할 일 목록을 조회하는 쿼리가 무효화되고 새 할일 목록을 표시하기 위해 다시 가져올 수 있습니다.

useMutation 의 onSuccess 옵션과 클라이언트의 invalidateQuries 기능을 사용할 수 있습니다.

 import { useMutation, useQueryClient } from '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')
   },
 })