getArticleData는 캐시 키를 사용하여 캐시 데이터를 조회할 수 있습니다. 이때 데이터가 undefined일 수 있으니, 만약 데이터가 존재하지 않으면 빈 배열을 사용하도록 준비해줬습니다. 그리고 타입스크립트 환경에서는 Generic을 지정하면 반환값의 데이터 타입도 설정할 수 있습니다.

setQueryData는 캐시 데이터를 업데이트하는 메서드입니다. setQueryData를 사용할 때는 위와 같이 데이터를 두 번째 인자로 넣어도 되고, 업데이터 함수 형태의 값을 인자로 넣을 수도 있습니다. 만약 업데이터 함수 형태를 인자로 넣는다면 getQueryData를 생략할 수 있습니다. 다음과 같이 말이죠.

screens/WriteScreen.tsx - useMutation

const {mutate: write} = useMutation(writeArticle, {
  onSuccess: (article) => {
    // 캐시 키로 데이터를 조회한 후 그 데이터를 업데이터 함수를 사용하여 업데이트
    queryClient.setQueryData<Article[]>('articles', (articles) =>
      (articles ?? []).concat(article),
    );
    navigation.goBack();
  },
});

이렇게 과거에 불러온 데이터를 갱신하는 두 가지 방법을 배웠습니다. 만약 API를 새로 요청하고 싶으면 invalidate를 하고, API 재요청 없이 데이터를 업데이트하고 싶으면 setQueryData를 사용하면 됩니다.