React Query(v4) - 8. useInfiniteQuery

[유데미] React Query : React로 서버 상태 관리하기

📍useInfiniteQuery 훅스

  const { data, fetchNextPage, hasNextPage } = useInfiniteQuery({
    queryKey: ["sw-people"],
    queryFn: ({ pageParam = initialUrl }) => fetchUrl(pageParam),
    getNextPageParam: (lastPage) => lastPage.next || undefined,
  });

 

1️⃣data

2️⃣fetchNextPage

- 더 많은 데이터가 필요할 때 실행할 쿼리 함수

 

3️⃣hasNextPage

- 수집할 데이터가 있는지 없는지를 따지는 불린값

- getNextPageParam이 undefined를 반환하면 true -> false 로 바뀜

 

4️⃣pageParam

- fetchNextPage가 어떻게 보일지를 결정 (다음 페이지가 있는지 결정)

- 기본값(infiniteUrl = 탐색 시작할 API 기본 주소)을 부여하면 된다

 

5️⃣getNextPage

- lastPage를 인수로 갖는 함수

- 옵션으로 allPage 인수를 가질 수도 있다

- fetchNextPage가 실행되면 lastPage.next 프로퍼티를 따라 마지막 페이지에 도착

- 마지막 페이지에 해당(더이상 next 프로퍼티가 없을 때)하면 undefined를 반환