[React-query] 전역 response 캐치하기 - useIsFetching

API를 호출할 경우 응답 대기 시간 동안 로딩 UI를 보여주어야 했다.

 

원래는 Axios를 커스텀하고 싱글톤 패턴으로 인스턴스화하여 사용했지만 React-Query를 적용하면서 날 것의 Axios를 사용하는 바람에 발생한 사단이다. 이미 Axios를 커스텀하기에는 늦었기에 다른 방법을 모색하다 찾아낸 hook이다.

 

다행히도 React-Query에서 현재 fetching 중인 쿼리의 개수를 반환해주는 훅을 제공한다.

fetching 중인 쿼리의 개수가 0이면 현재 fetching 중인 쿼리가 없다는 것이다.
반면 실행 중인 쿼리의 개수가 0보다 크면, 현재 fetching 중인 쿼리가 존재한다는 것을 알 수 있다.

훅 네이밍 그대로 fetching 중인 상태의 갯수만 알 수 있기 때문에 fetching 이후의 성공, 실패 상태 값에 대해서는 알 수 없다.

(응답 상태값를 알고 싶을 경우 queryCache를 통해 확인할 수 있다.)

import { Loading } from './';
import { useIsFetching } from 'react-query';

function MyComponent() {
  const isFetching = useIsFetching();
  const [isloading, setIsLoading] = useState(false);

  useEffect(() => {
    if (isFetching === 0) {
    // 현재 fetching 중인 쿼리가 없을 경우
	  	setIsLoading(false);
	  } else {
    // 현재 fetching 중일 때
	  	setIsLoading(true);
	  }
  },[isFetching]);
  

  // ...
  return (
	{isLoading && <Loading />}
  )
}

 

useIsFetching 훅을 들여다보면 아래와 같다.

// useIsFetching을 들여다보면...
// useIsFetching은 오버로딩된 함수가 2개 더 있지만 작성하지 않았다. (총 3개)
function useIsFetching(filters?: QueryFilters, options?: Options): number;

// QueryFilters
interface QueryFilters {
	...
    predicate?: (query: Query) => boolean
}

추가적으로 fetching을 캐치하지 않을 쿼리는 아래와 같이 쿼리키를 해당 옵션에 정의해주면 된다. 
로딩UI가 불필요할 경우 이를 활용하는 방법도 있다.

const isFetching = useIsFetching({ predicate: ['a','b']});

이렇게 작성하면 a와 b 쿼리키의 fetching은 캐치하지 않는다.

predicate

fetch할 때 카운트하지 않을 queryKey를 배열로 정의

 

 

끗!