페이지 매김 및 무한 쿼리

페이지가 매겨진/지연된 쿼리

페이지가 매겨진 데이터 렌더링은 매우 일반적인 UI 패턴이며 React Query에서는 쿼리 키에 페이지 정보를 포함하여 "그냥 작동"합니다.

페이지 매김 쿼리를 수행하려면 색상 목록이 있다고 생각하고 다음과 같이 페이지 매김을 수행할 수 있습니다.

import React from "react";
import { useQuery } from "@tanstack/react-query";

const fetchColors = ({ queryKey }) => {
  const pageNumber = queryKey[1];
  return fetch(
    `http://localhost:4000/colors?_limit=2&_page=${pageNumber}`
  ).then((response) => response.json());
};

const Colors = () => {
  const [currPageNum, setCurrPageNum] = React.useState(1);

  const { data: colors, isFetching } = useQuery(
    ["colors", currPageNum],
    fetchColors,
    {
      keepPreviousData: true,
    }
  );

  return (
    <div>
      {colors?.map((color) => (
        <div key={color.id}>{color.name}</div>
      ))}

      <button
        onClick={() => setCurrPageNum((currPageNum) => currPageNum - 1)}
        disabled={currPageNum === 1}
      >
        previous
      </button>
      <button
        onClick={() => setCurrPageNum((currPageNum) => currPageNum + 1)}
        disabled={currPageNum === 5}
      >
        next
      </button>
      <div>{isFetching ? "loading..." : null}</div>
    </div>
  );
};

export default Colors;

여기서 주목해야 할 점은 keepPreviousData 구성을 true에 사용했다는 것입니다. 그것을 사용하는 것의 중요성을 보자.

사용하지 않는 경우keepPreviousData


UI는 success 및 loading 상태를 왔다 갔다 합니다. 각각의 새 페이지가 완전히 새로운 쿼리처럼 취급되기 때문입니다.
keepPreviousData를 사용하면



이번에는 매번 데이터를 가져오지만 백그라운드 가져오기가 수행되는 동안 이전 데이터가 디스플레이에 사용되고 새 데이터가 사용 가능해지면 스왑되므로 로드 상태가 표시되지 않습니다.

React Query 문서에 따르면,

By setting keepPreviousData to true we get a few new things:

• The data from the last successful fetch is available while new data is being requested, even though the query key has changed.
• When the new data arrives, the previous data is seamlessly swapped to show the new data.
• isPreviousData is made available to know what data the query is currently providing you.

무한 쿼리

무한 쿼리는 효율적으로 수행된다면 훌륭한 UX 기능이 될 수 있습니다. React Query는 이러한 종류의 목록을 쿼리하기 위해 useQuery라는 유용한 버전의 useInfiniteQuery를 지원합니다.

게임 목록이 있고 사용자가 한 번에 2개의 게임을 표시한 후 사용자가 다음 2개의 게임을 보려면 하단에 있는 추가 가져오기 버튼을 클릭해야 한다고 가정합니다.
강력한useInfiniteQueries 후크를 사용하여 이를 수행하는 방법은 다음과 같습니다.

import React from "react";
import { useInfiniteQuery } from "@tanstack/react-query";

const fetchGames = async ({ pageParam = 1 }) => {
  return fetch(`http://localhost:4000/games?_limit=2&_page=${pageParam}`).then(
    (response) => response.json()
  );
};

const TopGames = () => {
  const {
    isLoading,
    data,
    isError,
    error,
    hasNextPage,
    isFetching,
    fetchNextPage,
    isFetchingNextPage,
  } = useInfiniteQuery(["games"], fetchGames, {
    getNextPageParam: (_lastPage, pages) => {
      return pages.length < 5 ? pages.length + 1 : undefined;
    },
  });

  if (isLoading) {
    return <h4>loading</h4>;
  }

  if (isError) {
    return <h4>{error.message}</h4>;
  }

  return (
    <div>
      {data?.pages.map((group, index) => {
        return (
          <div key={index}>
            {group.map((game) => {
              return <h3 key={game.id}>{game.name}</h3>;
            })}
          </div>
        );
      })}

      <button disabled={!hasNextPage} onClick={fetchNextPage}>
        load more
      </button>
      <div>{isFetching && isFetchingNextPage ? "loading..." : null}</div>
    </div>
  );
};

export default TopGames;

읽어 주셔서 감사합니다!

이제 개발자가 직면한 정보를 가져오는 일반적인 사용 사례를 다루었으므로 변형, 즉 반응 쿼리를 사용하여 CRUD 작업을 수행하는 방법에 대해 알아보겠습니다.
언제든지 연락주세요! 😊

💻 Github 💌 Email

그때까지 행복한 코딩!