다른 페이지도 보여줘! Pagenation + 무한스크롤

페이지네이션

백엔드 서버에서 받는 page Int값을 이용하여, 페이지번호를 누르면 해당하는 페이지의 게시물들이 나오게 했다.

무한스크롤링

import InfiniteScroll from "react-infinite-scroller";

import { useQuery, gql } from "@apollo/client";
import styled from "@emotion/styled";

const FETCH_BOARDS = gql`
  query fetchBoards($page: Int) {
    fetchBoards(page: $page) {
      _id
      writer
      title
      contents
    }
  }
`;

const MyRow = styled.div`
  width: 100%;
  display: flex;
`;

const MyColumn = styled.div`
  width: 25%;
`;

const DomScroll = styled.div``;
/* height: 500px;
  overflow: auto; */

export default function MapBoardPage() {
  const { data, fetchMore } = useQuery(FETCH_BOARDS);

  // refetch 는 fetch 했던 걸 다시 보여주는 것
  // fetchMore 는 기존 것에 더해 다음 것도 추가적으로 fetch 하는 것

  const onLoadMore = () => {
    if (!data) return; // 처음엔 data가 존재하지 않기 때문에 return 요청

    fetchMore({
      // 페이지 개수 구하기 : fetchBoards 의 data 의 길이를 구해서 10으로 나눠줌
      variables: { page: Math.ceil(data.fetchBoards.length / 10) + 1 },
      updateQuery: (prev, { fetchMoreResult }) => {
        if (!fetchMoreResult.fetchBoards)
          return { fetchBoards: [...prev.fetchBoards] };

        return {
          fetchBoards: [...prev.fetchBoards, ...fetchMoreResult.fetchBoards],
        };
      },
    });
  };

  return (
    <DomScroll>
      <InfiniteScroll pageStart={0} loadMore={onLoadMore} hasMore={true}>
        {data?.fetchBoards.map((el) => (
          <MyRow key={el._id}>
            <MyColumn>{el._id.slice(0, 5)}</MyColumn>
            <MyColumn>{el.writer}</MyColumn>
            <MyColumn>{el.title}</MyColumn>
          </MyRow>
        ))}
      </InfiniteScroll>
    </DomScroll>
  );
}

무한스크롤 설치)
yarn add react-infinite-scroller