리액트쿼리 질문입니다

Question

리액트쿼리를 많이사용해본 분들께 질문드리고싶어요.

주변에 토이 프로젝트 하는분들 보면 뮤테이션을 사용할때, 보통 onSuccess로 invalidateQuries하거나 refetch로 다시 가져오더라고요. 
그런데 응답값으로 새로운 값을 주고있다면, 그걸 setQueryData로 캐시 업데이트하면 되는것 아닌가요?

특정 뮤테이션 결과에 따라 연관있는 여러api를 다시 불러와서 업데이트해야한다면 그만큼 api들을 전부 다시호출하는데요. 캐시업데이트보단 그냥 다 무효화 하는분들이 많던데 그냥 그게 편해서 그런건가요?

예를들어 게시물 하나를 수정하면, 게시글목록 다시불러오고, 개별 게시글 다시불러오고 하는데요.

백엔드에서 생성된게시글을 리턴값으로 준다면, 그걸로 개별 게시글은 캐시업데이트해주는게 낫지않나요?

강동희 · Answer

말씀하신대로 mutation의 응답 값으로 쿼리 데이터가 내려온다면 setQueryData 로 캐싱된 데이터를 변경해준다면 api콜을 한번이라도 줄일 수 있겠습니다.
invalidateQueries 는 그렇지 않은 상황에서 사용하거나, 쿼리의 상태가 변경되어야 하는데 집중해야 하는 상황에서 사용합니다.

아래 남긴 공식문서에서는 setQueryData 와 fetchQuery 에 대한 비교가 남겨있습니다.

https://tanstack.com/query/v4/docs/react/reference/QueryClient#queryclientsetquerydata