15.10.3 게시글 작성 후 처리 로직 변경하기

페이지네이션을 위해 useQuery 대신 useInfiniteQuery를 사용하면 기존에 작성한, 게시글을 작성한 후 반영하는 방법이 조금 바뀝니다. 새로운 로직을 다음과 같이 변경해보세요.

screens/WriteScreen.tsx - useMutation

import {InfiniteData, useMutation, useQueryClient} from 'react-query';

(...)

  const {mutate: write} = useMutation(writeArticle, {
    onSuccess: (article) => {
      queryClient.setQueryData<InfiniteData<Article[]>>('articles', (data) => {
        if (!data) {
          return {
            pageParams: [undefined],
            pages: [[article]],
          };
        }
        const [firstPage, ...rest] = data.pages; // 첫 번째 페이지와 나머지 페이지를 구분
        return {
          ...data,
          // 첫 번째 페이지에 article을 맨 앞에 추가, 그리고 그 뒤에 나머지 페이지
          pages: [[article, ...firstPage], ...rest],
        };
      });
      navigation.goBack();
    },
});

(...)

useInfiniteQuery를 사용할 때는 setQueryData 함수의 Generic 부분에 <InfiniteData<Article[]>>을 넣어야 합니다. 그리고 { pageParams, pages } 객체를 반환해야 합니다.

이 코드에서는 첫 번째 페이지의 맨 앞부분에 항목을 추가하도록 구현해줬습니다. 배열을 분해하고, 첫 번째 페이지의 앞부분에 붙이고, 또 배열끼리 붙이는 작업을 했는데 꽤나 번거로운 작업입니다. 아예 invalidate를 해서 API를 재요청하는 게 더 편할 수도 있습니다.