무한 스크롤로 댓글보여주기

무한댓글 만들기

💻 container

• 댓글 데이터와 fetchMore 기능을 쓰기위해 선언해주기

const { data, fetchMore } = useQuery(FETCH_BOARD_COMMENTS, {
    variables: {
      boardId: router.query.number,
    },
  });

• onLoadMore 함수 만들어주기
  fetchMore 과 updateQuery를 사용한다.

function onLoadMore() {
  if (!data) return;
  fetchMore({
    variables: {
      page: Math.ceil(data?.fetchBoardComments.length / 10) + 1,
                      }, 
    // 페이지는 전체댓글 갯수에 1페이지에 10개니까 
    // 10으로나뉜뒤 올림을 해줘야 전체 페이지 개수를 알수있다.
    updateQuery: (prev, { fetchMoreResult }) => {
      return {
        fetchBoardComments: [
          ...prev.fetchBoardComments,
          ...fetchMoreResult.fetchBoardComments,
        ],
      };
    },
  });
}
// updateQuery에는 복사를 사용해서 무한스크롤때 불러올 댓글페이지들을 가져온다.

💻 presenter

• InfiniteScroll 을 import 해서 Docs를 참고해 사용할 기능들을 넣어준다.

import InfiniteScroll from "react-infinite-scroller";
<InfiniteScroll pageStart={0} loadMore={props.onLoadMore} hasMore={true}>
  {props.data?.fetchBoardComments.map((el) => (
    <CommentsListUIItem key={el._id} el={el} />
  ))}
</InfiniteScroll>