리액트쿼리로 페이지네이션+무한스크롤 구현

const Popsts = (props) => {
	const {data} = useQuery({
		queryKey:['posts'],
		queryFn : getPopsts,
		initialData : props.posts, //서버에서 가져온 데이터
	})
}

//서버에서 미리 렌더링 시키기
export const getStaticProps = async() =>{
 const posts = await getPosts()
 return {props : {posts}}
}

export async function getServerSideProps() {
	const stores = await fetch(
	    `${process.env.NEXT_PUBLIC_API_URL}/api/stores`
	  ).then((res) => res.json());
  return {
    props: { stores },
  };
}

export async function getServerSideProps() {
  const stores = await axios(`${process.env.NEXT_PUBLIC_API_URL}/api/stores`);
  return {
    props: { stores },
  };
}

01_React Query 로 페이지네이션 구현하기

• 페이지넘버를 params 로 넘겨서 각 페이지에 맞는 데이터를 10개만 불러오도록 작업하기

• 총 페이지수가 10개 이하일 경우 각 페이지를 클릭할 수 있도록 아래와 같이 모든 페이지 숫자를 화면에 나열한다.

• 만약 총 페이지수가 10개 이상일 경우 현재 페이지 숫자만 화면에 표시하고 이전,다음 버튼으로 페이지를 이동한다.

• router query 로 현재 페이지 값 받기

• /api/stores?page=${id} 형태

• 현재 페이지 숫자를 강조한 형태로 페이지네이션 컴포넌트 보여주기

• 총 페이지 갯수 (totalPages) 와 현재 페이지(page) 매개변수로 받음

• totalPages 만큼 매핑을 하면서 페이지 이동링크를 만든다.
• query:{page:N}

• 현재 페이지는 파란색으로 표현

• 만약 총 페이지 수가 10보다 크면 이전,다음버튼 보여준다.

• 현재 페이지를 변수로 받아서 해당 페이지 데이터만 가공해서 넘겨준다

prisma 의 skip과 take 활용

const results = await prisma.post.findMany({
  skip: 3,//현재페이지 -1 : 첫번째페이지는 스킵을 하면 안되기 때문
  take: 4, //몇개씩 보여줄지 결정
  where: {
    email: {
      contains: 'prisma.io',
    },
  },
})

Pagination (Reference)

Prisma Client supports both offset pagination and cursor-based pagination. Learn more about the pros and cons of different pagination approaches and how to implement them.

https://www.prisma.io/docs/concepts/components/prisma-client/pagination#do-i-always-have-to-skip-1

02_React Query 로 무한스크롤 구현하기

const {data,error,
fetchNextPage,hasNextPage,isFetching,isFetchingNextPage,status} = useInfiniteQuery({
	queryKey:['projects'],
	queryFn: fetchProjects,
	getNextPageParam : (lastPage,pages) => lastPage.nextCursor
})

const {data, fetchNextPage, hasNextPage} = useInfiniteQuery({
	'posts' ,//쿼리 고유의 키
  fetchPosts, //데이터 가져오는 비동기 함수
	{
		getNextPageParam : (lastPage,pages) => lastPage.nextCursor //다음페이지 파라미터 추출
	}
})

...

<div>
	{data.pages.map((page,pageIdx)=>{
		<div key={pageIdx}>{page}</div>
	})
</div>

{hasNextPage ? 
	<button	onClick = {()=>fetchNextPage()} disabled={isFetching} >
		{isFetching ? '로딩중':'더보기'}
	</button> 
: null }

const fetchStore = async ({ pageParam = 1 }) => {
    const { data } = await axios("/api/stores?page=" + pageParam, {
      params: {
        limit: 10,
        page: pageParam,
      },
    });
    return data;
  };

  const {
    data: stores,
    isFetching,
    fetchNextPage,
    isFetchingNextPage,
    hasNextPage,
    isLoading,
    isError,
  } = useInfiniteQuery("stores", fetchStore, {
    getNextPageParam: (lastPage: any) =>
      lastPage.data?.length > 0 ? lastPage.page + 1 : undefined,
  });

  const fetchNext = useCallback(async () => {
    const res = await fetchNextPage();
    if (res.isError) {
      console.dir("ERROR=>", res.error);
    }
  }, [fetchNextPage]);

  useEffect(() => {
    let timerId: NodeJS.Timeout | undefined;
    if (isPageEnd && hasNextPage) {
      timerId = setTimeout(() => {
        fetchNext();
      }, 500);
    }
    return () => clearTimeout(timerId);
  }, [fetchNext, fetchNextPage, hasNextPage, isPageEnd]);

...

<button type="button" onClick={() => fetchNextPage()}>
	Next page
</button>

• useIntersectionObserver 훅을 생성하여 리스트 하단 ref 에 도달했는지 (isIntersecting) 확인

• 만약 페이지 하단에 도달하고, 다음 페이지가 있다면 리액트쿼리의 fetchNextPage() 함수를 호출한다.
• 페이지 하단에 도달했을 시 0.5초 뒤에 fetchNextPage() 함수 호출하고 그동안 로더를 띄워준다.

• 마지막 페이지에 다다를 때 까지 위 단계를 반복한다.

• 마지막 페이지에 도달하면 더이상 페이지 수가 올라가지 않도록 설계 (lastPage)

import useIntersectionObserver from '@/hooks/useIntersectionObserver'
import {useInfiniteQuery} from 'react-query'

const listRef = useRef<HTMLDivElement | null>(null);
const listEnd = useIntersectionObserver(listRef,{});
const isEndPage = !!listEnd?.isIntersecting;

useEffect(()=>{
 if(isEndPage && hasNextPage) {
		fetchNextPage();
	}
},[fetchNextPage,hasNextPage,isEndPage])

 

• data : infinite Query 결과 데이터

• data.pages : 가져온 페이지들의 배열

• data.pageParams : 페이지를 가져오기 위한 페이지 매개 변수, 배열의 형태

• fetchNextPage, fetchPreviousPage : 다음 페이지 및 이전 페이지의 데이터를 가져오는 함수

• getNextPageParam, getPreviousPageParam : 다음 및 이전페이지에 대한 매개변수를 생성하는 함수

• hasNextPage, hasPreviousPage : 다음 페이지 및 이전페이지가 있는지 여부를 나타내는 불리언 값

• isFetchingNextPage , isFetchingPreviousPage : 다음페이지 또는 이전페이지의 데이터를 가져오는 동안 로딩상태를 나타내는 불리언 값