[TanStakQuery] Background Fetching Indicators

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

function Todos() {
  const {
    status,
    data: todos,
    error,
    isFetching,
  } = useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
  })

  return status === 'loading' ? (
    <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할 때(백그라운드 포함) 전역 로딩 표시기를 표시하려면 seIsFetching₩ 훅을 사용할 수 있습니다:

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

function GlobalLoadingIndicator() {
  const isFetching = useIsFetching()

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

Reference

• Background Fetching Indicators | TanStack Query Docs