[ReactQuery] (4) ReactQuery - useIsFetching (feat. Nextjs)

Tanstack (ReactQuery) 대표이미지

 

 

접근 (요약)

앱에서 isLoading 과 isFetching만을 사용해 컴포넌트마다 개별 Loading Indicator만을 활용했다면,

useIsFetching에 대해서 알게 되고 더 큰 앱에 중앙 집중식 Loading Indicator를 사용해보기 위해 정리를 남긴다.

 

  1. isLoading & isFetching & useIsFetching

 

  2. useIsFetching 적용하기

 

  3. 적용 TEST

---

방법

  1. isLoading & isFetching & useIsFetching

# useIsFetching

- 각 컴포넌트에 대해 "개별 로딩 인디케이터 (Loading Indicator)" 를 사용하는 대신

- "중앙 집중식 로딩 인디케이터"를 사용하도록 앱을 업데이트 할 예정!

>> useIsFetching 사용!

 

## 소규모 앱 (small apps)

- useQuery 반환 객체에서 "isFetching" 사용했음!

- useQuery 반환 객체에서 "isFetching"을 분해했습니다.

 

## isFetching > isLoading

- isLoading : isFetching과 동일하며 캐시된 데이터가 없음

  - 최초 1회 요청이며, 캐시가 없을 때만 true

- isFetching : isLoading을 품는 더 큰 카테고리이다. (캐시가 있든 없든)

  - 모든 요청을 포함, 캐시 유무와 관계없이 요청이 발생하면 true

 

## 큰 앱 (larger app)

- 더 큰 앱에서는 로딩 스피너 (Loading Spinner) 를 표시해야한다.

- Query가 데이터를 가져오는 과정에 있는 경우, 중앙 집중식 로딩 스피너 (Loading Spinner) 가 앱 컴포넌트의 일부가 될 것임

- 가져오는 Query가 있다면, 위 기능을 On, 없으면 OFF 함

 

>> "useIsFetching" 은 현재 가져오는 쿼리가 있는지 알려주는 마법의 hook이다.

    - 따라서 각 Custom Hooks에 isFetching을 사용할 필요가 없다!!

---

 

  2. useIsFetching 적용하기

import {Spinner, Text} from "@chakra-ui/react";
import {useIsFetching} from "@tanstack/react-query";

export function Loading() {
⭐️  const isFetching = useIsFetching(); // useIsFetching이 반환하는 무엇이든으로 바꿀 수 있다.
  // 위 useIsFetching은 현재 '가져오기(fetch)상태'인 Query 호출의 수를 나타내는 number(정수)를 반환한다.
⭐️  const display = isFetching ? "inherit" : "none";
  // 따라서 isFetching이 0보다 크면 Fetching 상태의 호출이 있고, '참'이기에 inherit = Loading Spinner 표시!
  // 현재 가져오는 항목이 0인 경우, 0은 false이기에 none! = Loading Spinner 표시X

  return (
    <Spinner
    ... 중략
    >
      <Text display="none">Loading...</Text>
    </Spinner>
  );
}

---

  3. 적용 TEST

>> 이후, 개발자도구 > 네트워크 > 인터넷 속도설정(?) > 빠른 4G 등 > 새로고침시 Loading Spinner를 확인할 수 있음

>> 더불어, 창을 켜둔 상태로 다른 브라우저탭에 갔다가 돌아오면 바로 로드가 되는데, 
이는 기본적으로 react-query와 함께 제공되는 reFetch 구성이다!

 

개발자도구 > 네트워크 > 인터넷 속도 설정(?)