핵심 요약
핏펫이 Apollo Client의 페이지네이션 페칭 가이드를 공개했고, 기존의 refetch 기반 페이징을 fetchMore로 전환하는 리팩토링 과정을 중심으로 구현 사례를 제시합니다.
구현 방법
- Apollo Client를 활용한 페이지네이션 페칭(수정: refetch → fetchMore 도입)
- useBundledProducts 훅으로 productId 및 정렬/필터 변수와 페이지 정보를 관리
- useIntersectionObserver로 리스트의 마지막 요소를 감지해 페이지 넘김 트리거 구현
- fetchMore 호출 시 updateQuery를 사용해 이전 데이터와 신규 데이터를 병합하고 캐시를 업데이트
- fetchPolicy를 cache-and-network로 설정해 캐시와 네트워크 데이터를 함께 활용
- 데이터 정제: data?.edges.map(edge => edge?.node)로 최종 목록 구성
주요 결과
- 무한 스크롤에서 추가 로딩이 정상적으로 작동하도록 구현
- 캐시를 활용한 데이터 업데이트로 중복 없이 리스트가 확장되도록 구성
- totalCount 및 hasNextPage를 기반으로 페이징 여부를 안정적으로 판단
