[React-Query] react-query useInfiniteQuery를 이용해서 페이지네이션 개선하기

현 사항

전에 팀원분이 페이지네이션 hook을 구현해 놓으셨는데, setState와 useEffect를 이용해서 구현을 해놓으셨다. 굳이 2가지의 요소를 사용하지 않아도 react-query의 useInfinteQuery를 이용해서 페이지네이션을 구현할 수 있다고 생각이 들어서, 다시 재제작을 해보았다.

 

구현 코드

처음에는 조건문을 사용하지 않고, 아래처럼 구현을 했었는데 처음에는 0을 불러왔는데, 버튼을 클릭하니 페이지 2를 불러오는 문제점이 발생했다. 

lastPage.last?undefined:allPages.length + 1

그래서 api 조건을 살펴보았는데, 우리쪽 백에서 page=0부터 시작하게 설정을 해놓아서, 아래처럼 조건문을 설정해놓았다!

 

const useFeedInfiniteQuery = () => {
  return useInfiniteQuery({
    queryKey: [FEED_API_KEY.FEEDS],
    queryFn: async ({ pageParam = 0 }) => await getFeeds({ page: pageParam }),
    getNextPageParam: (lastPage, allPages) => {
      const calculateNextPageParam = () => {
        if (lastPage.last) return undefined;
        else {
          if (allPages.length === 1) {
            return allPages.length;
          } else {
            return allPages.length + 1;
          }
        }
      };
      const nextPageParam = calculateNextPageParam();
      return nextPageParam;
    },
  });
};

export default useFeedInfiniteQuery;