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를 재요청하는 게 더 편할 수도 있습니다.

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.