Refactor: infinite query의 select활용해서 가져온 데이터 정제 #65

Author: jiyeeeah

components/pages/main/Feed/BoardsList/index.tsx

@@ -16,18 +16,11 @@ export default function BoardsList() {
       {isLoading ? (
         <FeedBoardLoading />
       ) : (
-        boardList?.pages &&
-        boardList?.pages?.map((page) =>
-          page.content.length > 0 ? (
-            page.content.map((board) => (
-              <div key={board.id} className="w-full">
-                <FeedBoardCard board={board} />
-              </div>
-            ))
-          ) : (
-            <div>아직 게시물이 없어요ㅠㅠ</div>
-          ),
-        )
+        boardList?.pages?.map((board) => (
+          <div key={board.id} className="w-full">
+            <FeedBoardCard board={board} />
+          </div>
+        ))
       )}
       {hasNextPage ? null : <div>🐾 더이상 게시물이 없어요 🐾</div>}
       <Observer>

components/pages/mypage/MyPageMain/MyBoardsList/index.tsx

@@ -14,15 +14,13 @@ export default function MyBoardsList() {
   return (
     <div className="grid w-full gap-5 tablet:grid-cols-2 tablet:mt-4">
       {myBoards &&
-        myBoards?.pages?.map((page) =>
-          page.content.map((board) => (
-            <div key={board.id} className="w-full">
-              <Link key={board.id} href={`/board/${board.id}`}>
-                <MyBoardCard board={board} />
-              </Link>
-            </div>
-          )),
-        )}
+        myBoards?.pages?.map((board) => (
+          <div key={board.id} className="w-full">
+            <Link key={board.id} href={`/board/${board.id}`}>
+              <MyBoardCard board={board} />
+            </Link>
+          </div>
+        ))}
       <Observer>
         <div>로딩중...</div>
       </Observer>

components/ui/BoardCard/BoardIdCard.tsx

@@ -25,18 +25,16 @@ export default function BoardIdCard({ boardId }: { boardId: number }) {
             likedCount={board.likedCount}
             isLiked={board.boardLiked}
           >
-            {commentList?.pages.map((page) =>
-              page.content.map((comment) => (
-                <BoardCardId.BoardCardModalComments
-                  boardId={board.id}
-                  id={comment.id}
-                  userName={comment.nickname}
-                  content={comment.content}
-                  isUser={comment.replyWriter}
-                  userImage={comment.userImageUrl}
-                />
-              )),
-            )}
+            {commentList?.pages.map((comment) => (
+              <BoardCardId.BoardCardModalComments
+                boardId={board.id}
+                id={comment.id}
+                userName={comment.nickname}
+                content={comment.content}
+                isUser={comment.replyWriter}
+                userImage={comment.userImageUrl}
+              />
+            ))}
             <Observer>로딩중...</Observer>
           </BoardCardId.BoardCardCommentWrapper>
         </BoardCardId.Content>

components/ui/BoardCard/ModalBoardCard.tsx

@@ -25,18 +25,16 @@ export default function ModalBoardCard({ boardId }: { boardId: number }) {
             likedCount={board.likedCount}
             isLiked={board.boardLiked}
           >
-            {commentList?.pages.map((page) =>
-              page.content.map((comment) => (
-                <BoardCardModal.ModalComments
-                  boardId={board.id}
-                  id={comment.id}
-                  userName={comment.nickname}
-                  content={comment.content}
-                  isUser={comment.replyWriter}
-                  userImage={comment.userImageUrl}
-                />
-              )),
-            )}
+            {commentList?.pages.map((comment) => (
+              <BoardCardModal.ModalComments
+                boardId={board.id}
+                id={comment.id}
+                userName={comment.nickname}
+                content={comment.content}
+                isUser={comment.replyWriter}
+                userImage={comment.userImageUrl}
+              />
+            ))}
             <Observer>로딩중...</Observer>
           </BoardCardModal.BoardCardCommentWrapper>
         </BoardCardModal.Content>

hooks/common/useInfiniteScroll.tsx

@@ -1,30 +1,33 @@
 'use client';
 
-import { useInfiniteQuery } from '@tanstack/react-query';
+import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query';
 import { useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 
-interface InfiniteScrollProps<T> {
+interface InfiniteScrollProps<T, P = undefined> {
   queryKey: string[];
   firstPageParam: number;
   queryFn: (pageNumber: number, ...params: number[]) => Promise<T>;
   getNextPageParamFn: (page: T) => void;
   params: number[];
+  selectFn?: (data: InfiniteData<T>) => InfiniteData<P>;
 }
 
-export default function useInfiniteScroll<T>({
+export default function useInfiniteScroll<T, P = undefined>({
   queryKey,
   firstPageParam,
   queryFn,
   getNextPageParamFn,
   params,
-}: InfiniteScrollProps<T>) {
+  selectFn,
+}: InfiniteScrollProps<T, P>) {
   const { data, fetchNextPage, isLoading, hasNextPage, isFetchingNextPage } =
     useInfiniteQuery({
       queryKey,
       queryFn: ({ pageParam = firstPageParam }): Promise<T> =>
         queryFn(pageParam, ...params),
       getNextPageParam: getNextPageParamFn,
+      select: selectFn,
     });
 
   // 무한 스크롤 화면 가장 아래 부분 탐지하는 observer

hooks/queries/useGetBoardList.ts

@@ -0,0 +1,31 @@
+'use client';
+
+import { getBoardList } from '@/service/board';
+import { Board, BoardList } from '@/types/types';
+import { queryKeys } from '@/constant/query-keys';
+import useInfiniteScroll from '../common/useInfiniteScroll';
+
+export default function useGetBoardList() {
+  const { data, isLoading, Observer, hasNextPage } = useInfiniteScroll<
+    BoardList,
+    Board
+  >({
+    queryKey: [queryKeys.BOARD_LIST],
+    firstPageParam: 0,
+    queryFn: getBoardList,
+    getNextPageParamFn: (boardList) =>
+      boardList.last ? undefined : boardList.number + 1,
+    params: [],
+    selectFn: (d) => ({
+      pages: d.pages.flatMap((page) => page.content),
+      pageParams: d.pageParams,
+    }),
+  });
+
+  return {
+    Observer,
+    data,
+    isLoading,
+    hasNextPage,
+  };
+}

hooks/queries/useGetBoardList.tsx

@@ -1,20 +1,26 @@
 'use client';
 
 import { getCommentList } from '@/service/board';
-import { CommentList } from '@/types/types';
+import { CommentList, Comment } from '@/types/types';
 import { queryKeys } from '@/constant/query-keys';
 import useInfiniteScroll from '../common/useInfiniteScroll';
 
 export default function useGetCommentList(boardId: number) {
-  const { data, isLoading, Observer, hasNextPage } =
-    useInfiniteScroll<CommentList>({
-      queryKey: [queryKeys.COMMENT_LIST],
-      firstPageParam: 0,
-      queryFn: getCommentList,
-      getNextPageParamFn: (boardList) =>
-        boardList.last ? undefined : boardList.number + 1,
-      params: [boardId],
-    });
+  const { data, isLoading, Observer, hasNextPage } = useInfiniteScroll<
+    CommentList,
+    Comment
+  >({
+    queryKey: [queryKeys.COMMENT_LIST],
+    firstPageParam: 0,
+    queryFn: getCommentList,
+    getNextPageParamFn: (boardList) =>
+      boardList.last ? undefined : boardList.number + 1,
+    params: [boardId],
+    selectFn: (d) => ({
+      pages: d.pages.flatMap((page) => page.content),
+      pageParams: d.pageParams,
+    }),
+  });
 
   return {
     Observer,

hooks/queries/useGetCommentList.tsx

@@ -1,16 +1,20 @@
 import { getMyBoardList } from '@/service/myPage';
-import { MyBoardList } from '@/types/types';
+import { Board, MyBoardList } from '@/types/types';
 import { queryKeys } from '@/constant/query-keys';
 import useInfiniteScroll from '../common/useInfiniteScroll';
 
 export default function useGetMyBoardList() {
-  const { data, isLoading, Observer } = useInfiniteScroll<MyBoardList>({
+  const { data, isLoading, Observer } = useInfiniteScroll<MyBoardList, Board>({
     queryKey: [queryKeys.MY_BOARD_LIST],
     firstPageParam: 0,
     queryFn: getMyBoardList,
     getNextPageParamFn: (boardlist) =>
       boardlist.last ? undefined : boardlist.number + 1,
     params: [],
+    selectFn: (d) => ({
+      pages: d.pages.flatMap((page) => page.content),
+      pageParams: d.pageParams,
+    }),
   });
 
   return {

hooks/queries/useGetMyBoardList.tsx

@@ -1,16 +1,23 @@
 import { getBookmarkedBoardList } from '@/service/myPage';
-import { BookmarkedBoardList } from '@/types/types';
+import { Board, BookmarkedBoardList } from '@/types/types';
 import { queryKeys } from '@/constant/query-keys';
 import useInfiniteScroll from '../common/useInfiniteScroll';
 
 export default function useGetBookmarkedBoardList() {
-  const { data, isLoading, Observer } = useInfiniteScroll<BookmarkedBoardList>({
+  const { data, isLoading, Observer } = useInfiniteScroll<
+    BookmarkedBoardList,
+    Board
+  >({
     queryKey: [queryKeys.MY_BOOKMARKED_LIST],
     firstPageParam: 0,
     queryFn: getBookmarkedBoardList,
     getNextPageParamFn: (boardlist) =>
       boardlist.last ? undefined : boardlist.number + 1,
     params: [],
+    selectFn: (d) => ({
+      pages: d.pages.flatMap((page) => page.content),
+      pageParams: d.pageParams,
+    }),
   });
 
   return {