1. useInfiniteQuery ?

react-query에서 제공하는 hook으로, 데이터를 페이지나 커서 기반의 인피니트 리스트로 가져오는 API를 쿼리하는 데 사용됩니다.

2. useInfiniteQuery 사용방법

1 ) useInfiniteQuery 기본 형식

useInfiniteQuery는querykey, queryFn, option 3개의 프로퍼티를 가집니다.

queryFn는 pageParam를 매개변수로 가져올 수 있습니다.

pageParam : useInfiniteQuery가 현재 어떤 페이지에 있는지를 확인할 수 있는 값입니다.

pageParam에서 설정한 url를 기본값으로 pageParm를 사용하여 queryFn를 실행하게 됩니다.

기본값은 initialPageParam 옵션에서 설정하게됩니다.

useInfiniteQuery({
  querykey : ['쿼리키'], 
  queryFn :({pageParam}) => fetchData(pageParam),
	option,
});

2 ) useInfiniteQuery 반환 data

useInfiniteQuery에서 반환 data는 pages와 pageParams로 이루어져 있습니다.

pages : 각 쿼리에 대한 data와 pargeParam를 가진 객체 배열입니다,

pageParams : 각 쿼리에 대한 페이지 파라미터 배열입니다.

{
  pages: [
    { pageParam: 1, data: [...] },  // 첫 번째 페이지
    { pageParam: 2, data: [...] },  // 두 번째 페이지
    // ...
  ],
  pageParams: [1, 2, ...] // 사용된 페이지 파라미터들
}

각 쿼리는 pages 배열의 자신만의 데이터를 가지고 있고, 쿼리는 페이지가 변경될 때마다 같이 변경되며, 페이지 매개변수는 검색된 쿼리의 키를 추적합니다.