사용자가 일정 스크롤을 했을때, 밑에 데이터가 추가로 붙음.

페이지의 특정 지점을 스크롤 했을 때 새 데이터를 가져오게 한다.

<aside> 💡 사용자가 데이터의 하단으로 오면 새로운 데이터를 가져와서, 사용자가 중단 없이 계속 스크롤 할 수 있게 해줌.

</aside>

하나의 쿼리에 계속 추가 된다.

기본 셋팅

function App() {

  const queryClient = new QueryClient();
  return (
    <QueryClientProvider client={queryClient}>
      <div className="App">
      <h1>Infinite SWAPI</h1>
      <InfinitePeople />
      {/* <InfiniteSpecies /> */}
    </div>
    <ReactQueryDevtools/>
    </QueryClientProvider>
  );
}

UseInfinityQuery

• vs useQuery ⇒ {data} 는 단순히 쿼리 함수에서 반환되는 ‘데이터’ 였다.
• useQuery와 다르게 useInfinityQuery에서 { data }객체는 두 개의 프로퍼티를 가지고 있다.

1. pages : 데이터의 안의 정보, pages하나당 useQuery에서 받는 데이터에 해당한다.
2. pageParams : 각 페이지의 매개변수가 기록되어있다. 검색된 쿼리의 키를 추적한다. (흔하게 사용되지 않는다…??)

Syntax

• pageParam은 쿼리 함수에 전달되는 매개변수이다.

// 기본 문법
useInfiniteQuery('sw-people', ({ **pageParam** = defaultUrl }) => fetchUrl(**pageParam**))

• defaultUrl : fetchUrl에 처음에 전달할 초기값 셋팅