🚀 prefetchInfiniteQuery

prefetchInfiniteQuery는 페이지 기반 데이터를 미리 가져와 캐시에 저장하는 TanStack Query함수입니다.

useInfiniteQuery가 데이터를 "사용"하는 훅이라면,
prefetchInfiniteQuery는 데이터를 "미리 준비"하는 함수입니다.

👉 즉, 무한 스크롤 데이터를 사용자 요청 전에 선점(fetch)하는 전략

1️⃣ 필요성

useInfiniteQuery만 사용할 경우

컴포넌트 mount 
   ↓ 
데이터 요청 
   ↓ 
로딩 발생 
   ↓ 
렌더링

문제점

• 초기 진입 시 로딩 발생
• UX 지연
• 페이지 전환 시 체감 성능 저하

하지만 prefetchInfiniteQuery를 사용하면

페이지 진입 전
    ↓
데이터 미리 fetch
    ↓
캐시에 저장
    ↓
컴포넌트 mount
    ↓
즉시 렌더링

👉 로딩 없이 바로 데이터 사용 가능

2️⃣ 기본 구조

await queryClient.prefetchInfiniteQuery({ 
	queryKey: ["posts"], 
	queryFn: ({ pageParam }) => fetchPosts(pageParam), 
	initialPageParam: 1, 
	getNextPageParam: (lastPage) => lastPage.nextCursor 
});

🔹 주요 옵션

• queryKey: 캐시 식별 키
• queryFn: 데이터 fetch 함수
• initialPageParam: 첫 페이지 값
• getNextPageParam: 다음 페이지 계산

3️⃣ 내부 동작 방식

prefetchInfiniteQuery 실행 
	↓ 
queryFn 실행 (pageParam = initialPageParam) 
	↓ 
첫 페이지 데이터 fetch 
	↓
Query Cache 저장
	↓
컴포넌트에서 useInfiniteQuery 실행
	↓
캐시 데이터 즉시 사용

--

4️⃣ useInfiniteQuery와 연결

1. 사전 fetch

await queryClient.prefetchInfiniteQuery({ 
	queryKey: ["feed"], 
	queryFn: fetchFeed, 
	initialPageParam: 0, 
	getNextPageParam: (lastPage) => lastPage.cursor 
});

2. 실제 사용

const { data } = useInfiniteQuery({
  queryKey: ["feed"],
  queryFn: fetchFeed,
  initialPageParam: 0,
  getNextPageParam: (lastPage) => lastPage.cursor
});

✔️ 같은 queryKey를 사용하면 캐시 공유

5️⃣ prefetchQuery vs prefetchInfiniteQuery

✍️ 한 줄 정리

prefetchInfiniteQuery는 무한 스크롤 데이터를 미리 캐시에 채워 로딩 없는 빠른 UX를 만드는 선제적 데이터 fetch 전략이다.