프론트엔드/React-Query
-
[React-query] 전역 response 캐치하기 - useIsFetching프론트엔드/React-Query 2023. 4. 17. 21:03
API를 호출할 경우 응답 대기 시간 동안 로딩 UI를 보여주어야 했다. 원래는 Axios를 커스텀하고 싱글톤 패턴으로 인스턴스화하여 사용했지만 React-Query를 적용하면서 날 것의 Axios를 사용하는 바람에 발생한 사단이다. 이미 Axios를 커스텀하기에는 늦었기에 다른 방법을 모색하다 찾아낸 hook이다. 다행히도 React-Query에서 현재 fetching 중인 쿼리의 개수를 반환해주는 훅을 제공한다. fetching 중인 쿼리의 개수가 0이면 현재 fetching 중인 쿼리가 없다는 것이다. 반면 실행 중인 쿼리의 개수가 0보다 크면, 현재 fetching 중인 쿼리가 존재한다는 것을 알 수 있다. 훅 네이밍 그대로 fetching 중인 상태의 갯수만 알 수 있기 때문에 fetching ..