[React Query] Mutation 이후 캐시 데이터 직접 변경하기

일반적으로 Mutation 사용 이후 데이터가 변화했을 가능성이 높아서 데이터를 refetch 했었다. 당연하게도 이는 요청이 계속 발생하는 것임으로 성능에 좋지 않다. 직접 캐시된 데이터를 수정하는 방법을 알아냈다.

 

공식문서의 내용을 해석해보았다.(=> 이후가 나의 해석이다.)

 

서버에서 객체를 업데이트하는 변형을 처리할 때, 일반적으로 변형의 응답으로 새 객체가 자동으로 반환되는 것이 일반적입니다.

⇒ 데이터를 추가하는 mutation을 발생시키면 일반적으로 성공 응답으로 추가된 데이터 객체가  반환된다.

 

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

⇒ mutation 이후 refetch를 통해 불필요한 통신을 발생 시키는 대신

 

쿼리 클라이언트의 setQueryData 메서드를 사용하여 mutation 함수가 반환한 객체를 활용하고 기존 쿼리를 새 데이터로 즉시 업데이트할 수 있다.

⇒ 응답 성공 객체를 setQueryData 메서드로 바로 업데이트 해주자.

 

setQueryData 

queryClient.setQueryData(
  Querykey,
  (oldData) => oldData ? {
    ...oldData,
    title: 'my new post title'
  } : oldData
)

Querykey와 update 역할을 하는 콜백을 인자로 받는다. 콜백의 첫번째 인자로 기존 데이터를 불러 올 수 있고 불변성을 지켜서 수정하면 된다.