[RQ(37)]useIsFetching을 사용하는 중앙 집중식 페칭 표시기(Indicator)

목표

각 컴포넌트에 대해 개별 loading indicator을 사용하는 대신 중앙 집중식 loading indicator를 사용하도록 update 해보자.

=> hook인 useIsFetching을 활용하자.

useIsFetching

• 소규모 앱
  • useQuery 반환 객체에서 isFetching을 사용
    • (isLoading은 isFetching과 동일하지만 캐시된 data는 없음.)
• larger app
  • Loading spinner를 표시해야함.
    • query가 data를 가져오는 과정에 있는 경우, 중앙 집중식 loading spinner가 앱 component의 일부가 된다. 가져오는 query가 있으면 이 기능을 켜고, 가져오는 query가 없으면 이 기능을 끈다.
  • useIsFetching은 현재 가져오는 query가 있는지 알려주는 마법의 hook ! 즉, 각 custom hook에 대해 isFetching을 사용할 필요가 없다는 뜻.
  • 로딩 컴포넌트에서 이 훅 사용 가능. useIsFetching의 값은 spinner를 표시할지 여부를 알려준다.

코드 작성

loading 컴포넌트에서 useIsFetching 사용!

useIsFetching 훅을 import 한다.

useIsFetching 은 현재 가져오기 상태인 query 호출의 수를 나타내는 정수를 반환한다. number

• useIsFetching이 0보다 크면 fetching 상태의 호출이 있으며 참으로 평가됨.
  • 이 경우, display가 "inherit" 으로 설정돼서 loading spinner가 표시됨.
• 현재 가져오는 항목이 없는 경우, isFetching의 0은 false 값이므로 "none"이 설정됨.

로딩 스피너 => fetch 됨.
창을 클릭하는데 왜 바로 load될까? 이것은 react-query가 제공하는 refetch configuration이다. : 창에 focus 하면 data를 다시 가져옴.

다음 강의

query 오류가 발생할 때마다 toast message를 표시하는 global callback을 만들어보자.