[React Query] useInfiniteQuery

const initialUrl = "https://swapi.dev/api/people/";
const fetchUrl = async (url) => {
  const response = await fetch(url);
  return response.json();
};
.
.
.
    const { data, fetchNextPage, hasNextPage, isLoading, isFetching, isError, error } = useInfiniteQuery(
    ["sw-people"],
    ({ pageParam = initialUrl }) => fetchUrl(pageParam),
    {
      getNextPageParam: (lastPage) => lastPage.next || undefined, // hasNextPage가 undefined인지 확인해서 멈춤
    }
  );
  if (isLoading) return <div className="loading">로딩 중...</div>;
  if (isError) return <div>Error! {error.toString()}</div>;
  
  return (
    <>
      {isFetching && <div className="loading">로딩 중...</div>}

 

 

 

pageParam  => 두번째 인자

 

getNextPageParam: (lastPage or allPage(택1)) 처럼 allPage를 넣을 수도 있음. 새 페이지 데이터가 있을 때마다 pageParam에 지정해줌

 

isLoading이랑 isFetching 둘 다 사용해줘야 함