tanstack query, useInfiniteQuery와 useQuery와의 차이점

 

useQuery와의 차이점

1. 반환 객체에서 반환되는 데이터 속성의 구조와 형태 (pages, pageParams)

useQuery를 사용하면 쿼리 함수에서 데이터가 data 속성에 담겨 반환되지만, useInfiniteQuery 에서는 반환되는 객체가 data와 pages라는 두 가지 속성을 포함한다. pages는 각 데이터 페이지를 나타내는 객체의 배열이다. 따라서 pages 배열의 각 요소는 useQuery를 사용했을 때 각각의 쿼리에서 받을 수 있는 데이터에 해당한다. 

 

 

pageParams (페이지 매개변수)도 있는데, 이는 각 페이지마나 사용하는 파라미터를 기록한다. (잘 사용되지는 않는다.)

 

 

그래서 각 쿼리는 pages 배열의 자신만의 요소를 가지고 있고, 그 요소는 해당 쿼리의 데이터를 나타낸다. 

쿼리는 페이지를 진행함에 따라 변경되고, 페이지 매개변수는 검색된 쿼리의 키를 추적한다. 

 

 

2. syntax

useInfiniteQuery 옵션 중 getNextPageParam: (lastPage, allPages) => 마지막 페이지 데이터나 모든 페이지의 데이터에서 다음 페이지를 가져오는 방법을 알려주는 함수

 

 

* useInfiniteQuery의 return object properties

fetchNextPage => 사용자가 더 많은 데이터를 필요할 때마다 호출하고 싶은 함수

hasNextPage => 다음 페이지가 있는지 

isFetchingNextPage => 다음 페이지를 가져오는 중인지 일반적으로 데이터를 가져오는 중인지를 구별할 수 있다. 

 

참고)

https://tanstack.com/query/latest/docs/framework/react/reference/useInfiniteQuery

useInfiniteQuery | TanStack Query React Docs

 

 

import InfiniteScroll from "react-infinite-scroller";
import { Species } from "./Species";
import { useInfiniteQuery } from "@tanstack/react-query";

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

export function InfiniteSpecies() {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isLoading,
    isError,
    error,
    isFetching,
  } = useInfiniteQuery({
    queryKey: ["sw-species"],
    queryFn: ({ pageParam = initialUrl }) => fetchUrl(pageParam),
    getNextPageParam: (lastPage) => lastPage.next || undefined,
  });

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

  return (
    <>
      {isFetching && <div className='loading'>Loading...</div>}
      <InfiniteScroll
        pageStart={0}
        loadMore={() => {
          if (!isFetching) {
            fetchNextPage();
          }
        }}
        hasMore={hasNextPage}
        loader={
          <div className='loader' key={0}>
            Loading ...
          </div>
        }
      >
        {data.pages.map((page, index) => (
          <ul key={index}>
            {page.results.map((species) => (
              <Species
                key={species.name}
                name={species.name}
                language={species.language}
                averageLifespan={species.average_lifespan}
              />
            ))}
          </ul>
        ))}
      </InfiniteScroll>
    </>
  );
}