[React] useInfiniteQuery page별로 받아오는 데이터 병합하기

현 사항

지금 더 보기를 누르면 페이지를 불러오는 식으로, 페이지네이션을 구현하였는데, 같이 함께 했던 팀원이 따로 페이지네이션이라는 hook을 만들어서 setState와 useEffect를 이용하여 구현을 해 놓은 상태였습니다.

하지만, react-query를 사용하고 있는 상황에서 이 페이지네이션 hook보다는 react-query의 useInfiniteQuery를 이용하여 개선을 하는게 좋다고 생각이 들어서 모든 페이지를 적용하고 있는데, 각 페이지마다 상황이 다르니깐 여러가지 문제가 생기게 되어서 정리를 하게 되었습니다.

 

문제 사항

우선, 저의 경우에는 데이터가 오면 날짜 별로 데이터를 Grouping을 하였는데, useInfiniteQuery를 이용하다보니, 페이지가 서로 다르면 페이지 별로 날짜가 Grouping되는 현상이 발생했다.

근데 사실, 이건 진짜 간단한 내용이어서, 정리를 할까 말까 고민하다가 혹시나 도움이 필요하실 수 있으니깐, 정리를 해보았습니다.

 

해결 방법

가지고 온 데이터를 flatMap을 이용하여 page로 분리 되어 있던 내용을 하나의 아이템으로 합쳤습니다. 저는 데이터의 content 부분만 필요했기 때문에 이 부분으로 합쳤습니다.

const concatenatePages = recordListData?.pages.flatMap(
    (page) => page.content,
  );

 

그리고, 하나의 아이템으로 변환된 내용을 reduce를 이용하여 날짜 별로 Grouping 하였습니다.

const sortByDate = concatenatePages?.reduce(
    (acc, curr) => {
      const { date } = curr;

      if (acc[date]) acc[date].push(curr);
      else acc[date] = [curr];
      return acc;
    },
    {} as Record<string, typeof concatenatePages>,
  );

 

결과

날짜 별로, Grouping이 잘 되어 있는 모습을 확인 할 수 있습니다

 

 

참고

How to merge all `page.items` from `useInfiniteQuery` data.pages hook into a single array?