15.10.3 게시글 작성 후 처리 로직 변경하기
페이지네이션을 위해 useQuery 대신 useInfiniteQuery를 사용하면 기존에 작성한, 게시글을 작성한 후 반영하는 방법이 조금 바뀝니다. 새로운 로직을 다음과 같이 변경해보세요.
screens/WriteScreen.tsx - useMutation
import {InfiniteData, useMutation, useQueryClient} from 'react-query'; ( ) const {mutate: write} (writeArticle, { (article) => { queryClient. <InfiniteData<Article[]>>('articles', (data) => { if (!data) { return { pageParams: [undefined], pages: [[article]], }; } const [firstPage, ...rest] = data.pages; // 첫 번째 페이지와 나머지 페이지를 구분 return { ...data, // 첫 번째 페이지에 article을 맨 앞에 추가, 그리고 그 뒤에 나머지 페이지 pages: [[article, ...firstPage], ...rest], }; }); navigation. (); }, }); (...)
useInfiniteQuery를 사용할 때는 setQueryData 함수의 Generic 부분에 <InfiniteData<Article[]>>을 넣어야 합니다. 그리고 { pageParams, pages } 객체를 반환해야 합니다.
이 코드에서는 첫 번째 페이지의 맨 앞부분에 항목을 추가하도록 구현해줬습니다. 배열을 분해하고, 첫 번째 페이지의 앞부분에 붙이고, 또 배열끼리 붙이는 작업을 했는데 꽤나 번거로운 작업입니다. 아예 invalidate를 해서 API를 재요청하는 게 더 편할 수도 있습니다.