TanStackQuery (8) - Background Fetching

 

쿼리의 status === 'pending' 상태는 쿼리의 초기 로딩 상태를 보여주기에 충분하지만,

때때로 쿼리가 백그라운드에서 다시 패치중을 나타내고 싶을 때가 있다.

이를 위해 쿼리는 status 변수의 상태와 고나계없이 패치 중 상태임을 보여주는데 사용할 수 있는 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}
            // ...

 

 

global Background fetching 로딩 상태 표시

개별 쿼리 로딩 상태 외에도 쿼리를 패칭할 때 글로벌 로딩 표시기를 표시하려면 useIsFetching hook을 사용할 수 있다.

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

function GlobalLoadingIndicator() {
	const isFetching = useIsFetching()
    
    return isFetching ? (
    	<div> Queries are fetching in the background...</div>
    ) : null
 }