Background Fetching Indicators

쿼리의 status === 'pending' 상태는 쿼리의 초기 로딩 상태를 보여주기에 충분하지만, 때로는 쿼리가 백그라운드에서 다시 fetching 중임을 추가로 표시하고 싶을 수 있습니다. 이를 위해 쿼리는 status 변수의 상태와 상관없이 fetching 상태를 보여주기 위해 사용할 수 있는 isFetching boolean 값을 제공합니다:

function Todos() {
  const {
    status,
    data: todos,
    error,
    isFetching,
  } = useQuery({
    queryKey: ["todos"],
    queryFn: fetchTodos,
  });
 
  return status === "pending" ? (
    <span>Loading...</span>
  ) : status === "error" ? (
    <span>Error: {error.message}</span>
  ) : (
    <>
      {isFetching ? <div>Refreshing...</div> : null}
 
      <div>
        {todos.map((todo) => (
          <Todo todo={todo} />
        ))}
      </div>
    </>
  );
}

Displaying Global Background Fetching Loading State

개별 쿼리 로딩 상태 외에도, 어떤 쿼리든 fetching 중일 때 전역 로딩 인디케이터를 표시하고 싶다면, useIsFetching 훅을 사용할 수 있습니다:

import { useIsFetching } from "@tanstack/react-query";
 
function GlobalLoadingIndicator() {
  const isFetching = useIsFetching();
 
  return isFetching ? (
    <div>Queries are fetching in the background...</div>
  ) : null;
}

Dependent Queries Window Focus Refetching