15.9.7 QueryClient로 캐시 데이터 직접 수정하기

방금은 캐시 키로 특정 데이터를 만료시키고 API를 새로 요청하는 방식으로 데이터를 갱신했습니다. 지금 상황에서는 이 방식 말고 또 다른 방식으로도 새로운 포스트가 화면에 나타나게 만들 수 있는데요. 바로 게시글 작성에 성공했을 때의 응답 결과를 바로 기존 캐시 데이터에 추가하는 것입니다.

이를 구현하기 위해서는 QueryClient의 두 가지 메서드를 사용해야 합니다. 게시글 작성의 onSuccess를 다음과 같이 수정해보세요.

screens/WriteScreen.tsx – useMutation

import {Article} from '../api/types';
(...)

const {mutate: write} = useMutation(writeArticle, {
  onSuccess: (article) => {
    /*
     queryClient.invalidateQueries('articles'); // articles 캐시 키 만료시키기
     */
    // 캐시 데이터 조회
    const articles = queryClient.getQueryData<Article[]>('articles') ?? [];
    // 캐시 데이터 업데이트
    queryClient.setQueryData('articles', articles.concat(article));
    navigation.goBack();
  },
});