🔥 뮤테이션으로 인한 무효화
174자
3분
쿼리를 무효화하는 것은 전체 과정의 절반에 불과합니다. 언제 무효화해야 할지 아는 것이 나머지 절반입니다. 일반적으로 앱에서 뮤테이션이 성공하면, 해당 뮤테이션으로 인한 변경 사항을 반영하기 위해 무효화하고 다시 가져와야 할 관련 쿼리들이 있을 가능성이 매우 높습니다.
예를 들어, 새로운 할 일을 추가하는 뮤테이션이 있다고 가정해 봅시다:
typescript
const mutation = useMutation({ mutationFn: postTodo })
typescript
const mutation = useMutation({ mutationFn: postTodo })
postTodo 뮤테이션이 성공적으로 실행되면, 새로 추가된 할 일 항목을 보여주기 위해 모든 할 일 쿼리를 무효화하고 다시 가져와야 할 것입니다. 이를 위해 useMutation의 onSuccess 옵션과 클라이언트의 invalidateQueries 함수를 사용할 수 있습니다:
typescript
import { useMutation, useQueryClient } from '@tanstack/react-query'
const queryClient = useQueryClient()
// 이 뮤테이션이 성공하면 'todos' 또는 'reminders' 쿼리 키를 가진 모든 쿼리를 무효화합니다
const mutation = useMutation({
mutationFn: addTodo,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['todos'] })
queryClient.invalidateQueries({ queryKey: ['reminders'] })
},
})
typescript
import { useMutation, useQueryClient } from '@tanstack/react-query'
const queryClient = useQueryClient()
// 이 뮤테이션이 성공하면 'todos' 또는 'reminders' 쿼리 키를 가진 모든 쿼리를 무효화합니다
const mutation = useMutation({
mutationFn: addTodo,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['todos'] })
queryClient.invalidateQueries({ queryKey: ['reminders'] })
},
})
무효화 작업을 useMutation 훅에서 사용 가능한 어떤 콜백을 이용해서도 연결할 수 있습니다.
이렇게 함으로써 뮤테이션으로 인한 데이터 변경을 앱 전체에 효과적으로 반영할 수 있습니다. 무효화 과정을 통해 관련된 모든 쿼리가 최신 상태를 유지하도록 보장하며, 사용자에게 항상 최신 데이터를 제공할 수 있습니다.
YouTube 영상
