🔖 useInfiniteQuery를 사용한 그래프 무한스크롤 구현

분야	작성자	작성일
FE	조배경	24년 12월 03일

문제 상황

무한스크롤로 데이터를 불러오면 항상 새로운 데이터로 갱신된다.

그럼 이전 값들은 우째..

주춤주춤 서비스에서는 그래프를 조회하는데, 데이터가 굉장히 많기 때문에 100개씩 잘라서 응답을 받는다.

그래서 사용자가 왼쪽으로 스크롤하여 이전 데이터를 호출하려 한다면, 호출하려는 데이터의 가장 최신 시간(lastStartTime)을 함께 파라미터로 넘겨야한다.

호출하려는 데이터의 가장 최신 시간이란, 현재 보여지는 그래프의 가장 오래된 시간과 같다.

따라서 그래프를 스크롤하다가 그래프 가시범위의 시작점이 특정 위치보다 작아지면, 추가 데이터를 로드한다.

이때, lastStartTime을 useState로 저장하여 추가 데이터를 요청하고 있었다.

const fetchGraphData = (logicalRange) => {
  // 특정 위치에 닿으면
  if (logicalRange && logicalRange.from < -50 && hasNextPage) {
     // 현재 데이터의 가장 오래된 시간을 lastStartTime 상태에 저장
    setLastStartTime(data?.pages[0].priceDtoList[0].startTime); 

    // 새로운 데이터 트리거
    fetchNextPage();
  }
};

여기서 문제는, 새로운 데이터를 받을 때마다 data가 갱신되어 항상 새로운 데이터만 그래프에 보였다. 즉 스크롤하여 데이터를 받아오면, 값이 누적되는 것이 아니라 항상 스크롤되어 얻은 값으로 갱신된 것이다.

그래서 항상 따로 값을 누적해서 저장해줘야할까 싶었다.

하지만 서버에서 받아온 응답값을 관리하기 위해 tanstack query로 관리하고, 누적을 위해 useState로 관리한다는 게 번거로울 것이다.

그래서 이미 구현되어 있진 않은지 다시 한번 살펴보니, useInfiniteQuery는 응답값에 이미 데이터를 누적하여 저장하고 있었다.

useInfiniteQuery의 옵션 이해하기

useInfiniteQuery의 반환값 중 data는, pages와 pageParams를 포함한다.

• pages: 무한스크롤하여 얻어지는 모든 데이터가 누적되어 저장
• pageParam: 요청에 필요한 페이지 파라미터

우리 팀 api에는 pageParam을 별도로 넘기지 않았기 때문에 이 점을 고려하지 않고 있었던 것이다.

그러나 응답값을 확인해봐도 항상 새로운 데이터로 갱신되어 있었다. 이는, 요청의 옵션 자체가 잘못 설정된 것이었다.

export const useGetStocksPriceSeries = ({
  stockId,
  lastStartTime,
  timeunit,
}: StockTimeSeriesRequest) => {
  return useInfiniteQuery({
    queryKey: ['stocksTimeSeries', stockId, lastStartTime, timeunit],
    queryFn: () => getStocksPriceSeries({ stockId, lastStartTime, timeunit }),
    getNextPageParam: (data) => (data.hasMore ? true : null),
    initialPageParam: true,
  });
};

getNextPageParam와 initialPageParam을 추가로 옵션으로 설정했는데, 이 의미를 제대로 파악하지 않고 사용하고 있었다.

getNextPageParam은, 다음 요청에 필요한 파라미터를 반환한다.

즉 무한스크롤 요청 시마다 lastStartTime의 상태를 새로 저장했던 로직을 getNextPageParam에서 진행하면 된다.

initalPageParam은 말그래도 초기 page 파라미터 값이므로, lastStartTime을 넘겨야한다.

아래는 수정된 코드이다.

export const useGetStocksPriceSeries = ({
  stockId,
  lastStartTime,
  timeunit,
}: StockTimeSeriesRequest) => {
  return useInfiniteQuery({
    queryKey: ['stocksTimeSeries', stockId, lastStartTime, timeunit],
    // 요청시마다 넘길 pageParam을 넣어주기
    queryFn: ({ pageParam }) => getStocksPriceSeries({ 
      stockId, 
      lastStartTime: pageParam?.lastStartTime ?? lastStartTime,
      timeunit 
    }),
    // 다음 요청에 필요한 파라미터는, hasMore가 true일 때 설정해주기. 이전의 setState 과정이 필요 없어진다!
    getNextPageParam: (lastPage) => 
      lastPage.hasMore 
        ? { 
            lastStartTime: lastPage.priceDtoList[0].startTime 
          } 
        : undefined,
    initialPageParam: { lastStartTime },
  });
};

그 결과, 갱신된 데이터가 pages에 차곡차곡 담긴다!

사실은 이전 데이터를 불러오는 것이니 getNextPageParam 대신에는 getPreviousPageParam, hasNextPage 대신에 hasPreviousPage를 쓰는 게 의미상 적절하다.

하지만 getPreviousPageParam를 사용하려하면, 이 호출과 일치하는 오버로드가 없습니다.라고 원인 모를 에러가 발생한다.

또한 getPreviousPageParam의 콜백의 파라미터인 firstPage, allPages, firstPageParam, allPageParams로 hasMore를 불러올 수 없어 위의 코드와 같은 로직을 짤 수 없었다.

따라서 getNextPageParam을 이용해 이전 데이터를 불러오고, select 옵션에 reverse()를 통해 역순으로 저장하여 그래프를 그리고 있다.

select: (data) => ({
  pages: [...data.pages].reverse(),
  pageParams: [...data.pageParams].reverse(),
}),