[React] React Query의useInfiniteQuery에서 무한 스크롤

개시하다
React Query의useInfiniteQuery()에서 무한 스크롤을 구현해 문장으로 정리했다.
"React Query가 뭐예요?"가능하다면 지난번 보도를 보십시오.
이른바 useInfiniteQueryuseInfiniteQuery() 일부 데이터가 되돌아오는 다음 조회를 추적합니다.
반환useQuery()data의 내용은 다르고 pages와 pageParams 두 속성을 포함하는 대상이다.pages는 검색 결과를 수조로 되돌려주고, pageParams는 이미 실행된 검색 키를 수조로 되돌려준다.
위는pages, 아래는pageParams의 결과의 예이다.

또한 useInfiniteQuery()의 기술 예는 다음과 같다.

  const {
    data,
    fetchNextPage,
    hasNextPage,
    isLoading,
    isFetching,
    isError,
    error,
  } = useInfiniteQuery(
    'sw-people',
    ({ pageParam = initialUrl }) => fetchUrl(pageParam),
    {
      getNextPageParam: (lastPage) => lastPage.next || undefined,
    }
  );

pageParam에서 초기값defaultUrl으로 설정되었으나 옵션getNextPageParam을 통해 업데이트되었습니다.
이상의 예에서 최신 페이지의 데이터lastPage 중 다음pageParam을 lastPage.next || undefined로 설정하고 allPages 파라미터를 사용할 수 있다.
이렇게 하면 pageParam의 현재 값이 React Query에서 관리됩니다.
또한useInfiniteQuery() 되돌아오는 대상 속성 중useQuery()에 없는 다음과 같은 속성이 존재한다.

fetchNextPage: 다음 페이지의 데이터를 되찾을 수 있는 함수

hasNextPage: getNextPageParam가 업데이트pageParam되면 true(undefined시false

로 돌아갑니다.

isFetchingNextPage: fetchNextPage에서 다음 페이지의 데이터를 받았을 때true 되돌아오기(loading 로고에 사용)

지금까지 등장한 단어를 실제 데이터로 얻는 절차는 다음과 같다.

구성 요소가 첫 페이지로 마운트됨

getNextPageParam 업데이트 pageParam

hasNextPage인 경우 이벤트(스크롤 또는 버튼 클릭)로 수행true

2→3 반복fetchNextPage까지hasNextPage

설치 예undefined 및 React Infinite Scroller를 사용하여 무한 스크롤을 수행합니다.
InfinitePeople.jsx

import InfiniteScroll from 'react-infinite-scroller';
import { useInfiniteQuery } from 'react-query';
import { Person } from './Person';

const initialUrl = 'https://swapi.dev/api/people/';
const fetchUrl = async (url) => {
  const response = await fetch(url);
  return response.json();
};

export function InfinitePeople() {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isLoading,
    isFetching,
    isError,
    error,
  } = useInfiniteQuery(
    'sw-people',
    ({ pageParam = initialUrl }) => fetchUrl(pageParam),
    {
      getNextPageParam: (lastPage) => lastPage.next || undefined,
    }
  );

  if (isLoading) return <div className="loading">Loading...</div>;
  if (isError) return <div>Error! {error.toString()}</div>;

  return (
    <>
      {isFetching && <div className="loading">Loading...</div>}
      <InfiniteScroll loadMore={fetchNextPage} hasMore={hasNextPage}>
        {data.pages.map((pageData) => {
          return pageData.results.map((person) => {
            return (
              <Person
                key={person.name}
                name={person.name}
                hairColor={person.hair_color}
                eyeColor={person.eye_color}
              />
            );
          });
        })}
      </InfiniteScroll>
    </>
  );
}

useInfiniteQuery()에서 react-infinite-scroll를 가져온 후 InfiniteScroll 구성 요소를 봉합니다.Person 속성loadMore을 fetchNextPage 속성hasMore으로 설정하면 다음 페이지의 데이터 추출을 제어할 수 있습니다.
참고 자료