🚚 useInfiniteQuery

useInfiniteQuery는 페이지 기반 서버 데이터를 연속적으로 가져오기 위한 TanStack Query 훅입니다.

일반 useQuery가 단일 데이터를 관리한다면
useInfiniteQuery는 페이지 단위 데이터 리스트를 누적 관리합니다.

대표적인 사용 예:

• 무한 스크롤
• "더 보기" 버튼
• 댓글 / 피드 / 타임라인
• cursor 기반 pagination

1️⃣ useInfiniteQuery 필요성

일반 pagination은 useQuery로 구현하면 다음 문제가 발생합니다.

useQuery({
  queryKey: ["posts", page],
  queryFn: () => fetchPosts(page)
})

문제 점

• 페이지가 바뀔 때마다 기존 데이터 사라짐
• 리스트 누적 관리 직접 구현 필요
• 스크롤 UX 구현 어려

예

1페이지 → 렌더
2페이지 → 기존 데이터 사라짐
3페이지 → 또 교체

하지만 실제 UI는 보통

1페이지
2페이지
3페이지

처럼 계속 누적된 리스트가 필요합니다.

👉 이 문제를 해결하는 것이 useInfiniteQuery

2️⃣ 기본 구조

const {
  data,
  fetchNextPage,
  hasNextPage,
  isFetchingNextPage,
  status
} = useInfiniteQuery({
  queryKey: ["posts"],
  queryFn: ({ pageParam }) => fetchPosts(pageParam),
  initialPageParam: 1,
  getNextPageParam: (lastPage) => lastPage.nextPage
});

🔹 주요 옵션

3️⃣ 내부 데이터 구조

useQuery

data = {...}

useInfiniteQuery

data = {
  pages: [],
  pageParams: []
}

예시:

data = {
  pages: [
    { posts: [1,2,3] },
    { posts: [4,5,6] },
    { posts: [7,8,9] }
  ],
  pageParams: [1,2,3]
}

🔹 렌더링 방식

data.pages.map((page) =>
  page.posts.map(post => (
    <Post key={post.id} />
  ))
)

👉 페이지 단위 데이터를 내부적으로 관리

4️⃣ 다음 페이지 요청

fetchNextPage()

예:

<button onClick={() => fetchNextPage()}>
    더 보기
</button>

🔹 상태 값

5️⃣ 핵심 옵션: getNextPageParam

다음 페이지를 계산하는 함수입니다.

getNextPageParam: (lastPage, pages) => lastPage.nextCursor

🔹 파라미터

예시 API

{
  "data": [...],
  "nextCursor": 3
}

구현

getNextPageParam: (lastPage) => lastPage.nextCursor

6️⃣ 흐름도

컴포넌트 mount
    ↓
data = undefined
    ↓
queryFn 실행
(pageParam = initialPageParam)
    ↓
1페이지 fetch
    ↓
pages[0] 저장
    ↓
getNextPageParam 실행
    ↓
다음 pageParam 계산

✍️ 한 줄 요약

useInfiniteQuery는 페이지 기반 서버 데이터를
Query Cache 내부에서 pages 배열로 누적 관리하여
무한 스크롤과 pagination을 쉽게 구현하는 시스템이다.