[TanStack Query / React Query] setQueryData : Mutation 응답으로부터의 업데이트

 

https://tanstack.com/query/latest/docs/framework/react/guides/updates-from-mutation-responses

TanStack | High Quality Open-Source Software for Web Developers

공식 문서를 번역한 글입니다.

 

 

Mutation 응답으로부터의 업데이트

 

서버의 객체를 업데이트하는 mutation을 다룰 때, 새로운 객체가 일반적으로 mutation 응답에서 자동으로 반환됩니다.

이미 가지고 있는 데이터를 위해 네트워크 호출을 낭비하며 해당 항목에 대한 쿼리를 다시 가져오는 대신,

mutation 함수가 반환한 객체를 활용하여 Query Client의 setQueryData 메서드를 사용해

기존 쿼리를 즉시 업데이트할 수 있습니다

 

const queryClient = useQueryClient()

const mutation = useMutation({
  mutationFn: editTodo,
  onSuccess: (data) => {
    queryClient.setQueryData(['todo', { id: 5 }], data)
  },
})

mutation.mutate({
  id: 5,
  name: '빨래하기',
})

// 아래 쿼리는 성공적인 mutation의 응답으로 업데이트됩니다
const { status, data, error } = useQuery({
  queryKey: ['todo', { id: 5 }],
  queryFn: fetchTodoById,
})

 

재사용 가능한 mutation에 onSuccess 로직을 연결하고 싶다면, 다음과 같이 커스텀 훅을 만들 수 있습니다:

 

const useMutateTodo = () => {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: editTodo,
    // 두 번째 인자는 `mutate` 함수가 받는 variables 객체입니다
    onSuccess: (data, variables) => {
      queryClient.setQueryData(['todo', { id: variables.id }], data)
    },
  })
}

 

 

불변성

 

setQueryData를 통한 업데이트는 반드시 불변한 방식으로 수행되어야 합니다. 

캐시에서 가져온 데이터를 직접 수정하여 캐시에 쓰려고 하지 마세요. 

처음에는 작동할 수 있지만 시간이 지나면서 미묘한 버그를 발생시킬 수 있습니다.

 

queryClient.setQueryData(['posts', { id }], (oldData) => {
  if (oldData) {
    // ❌ 이렇게 하지 마세요
    oldData.title = '새로운 게시물 제목'
  }
  return oldData
})

queryClient.setQueryData(
  ['posts', { id }],
  // ✅ 이것이 올바른 방법입니다
  (oldData) =>
    oldData
      ? {
          ...oldData,
          title: '새로운 게시물 제목',
        }
      : oldData,
)