15.9.6 QueryClient로 데이터 새로고침하기

리액트 쿼리에서는 useQuery를 사용할 때 입력한 캐시 키를 사용하여 기존 데이터를 만료시키고 새로 불러오도록 처리할 수 있습니다.

우선 WriteScreen에서 useQueryClient Hook을 사용하여 queryClient를 받아오세요. 이 Hook은 이전에 App 컴포넌트에서 QueryClientProvider에 넣었던 queryClient를 사용할 수 있게 해줍니다.

다음으로 게시글 작성에 성공했을 때 queryClient.invalidate(key) 함수를 사용하여 'articles' 캐시 키를 만료시켜보세요.

screens/WriteScreen.tsx

(...)
import {useMutation, useQueryClient} from 'react-query';
import {writeArticle} from '../api/articles';

function WriteScreen() {
  (...)
  const queryClient = useQueryClient();
  const {mutate: write} = useMutation(writeArticle, {
    onSuccess: () => {
      queryClient.invalidateQueries('articles'); // articles 캐시 키를 만료시키기
      navigation.goBack();
    },
  });
  (...)

이제 새 게시글을 다시 작성해보세요. 작성한 게시글이 ArticlesScreen에 나타났나요?