백그라운드 가져오기 표시기

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

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>
    </>
  )
}

전역 백그라운드 가져오기 로딩 상태 표시

개별 쿼리 로딩 상태 외에도 어떤 쿼리든 가져오는 중일 때(백그라운드에서 가져오는 경우 포함) 전역 로딩 표시기를 표시하려면 useIsFetching 훅을 사용할 수 있습니다:

import { useIsFetching } from '@tanstack/react-query'

function GlobalLoadingIndicator() {
  const isFetching = useIsFetching()

  return isFetching ? (
    <div>Queries are fetching in the background...</div>
  ) : null
}