공식문서 : https://tanstack.com/query/v4/docs/guides/background-fetching-indicators

Background Fetching Indicators

쿼리의 status==='loading' state는 쿼리의 초기 hard-loading 상태를 표시하기에 충분하지만, 때때로 쿼리가 백그라운드에서 refetch중이라는 추가 indicator를 표시하기를 원할 수 있다. 이를 위해 쿼리는 status 변수의 상태에 관계없이 fetching 상태에 있음을 표시하는데 사용할 수 있는 isFetching boolean 역시 제공한다.

function Todos() {
  const { status, data: todos, error, isFetching } = useQuery(
    'todos',
    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

개별 쿼리의 loading state외에도, 쿼리 하나라도 fetch중일때(백그라운드 포함) 전역 loading indicator를 표시하고 싶다면 useIsFetching hook을 사용할 수 있다 :

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

function GlobalLoadingIndicator() {
  const isFetching = useIsFetching()

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