IsFetching

<IsFetching/>는 실험 기능이므로 이 인터페이스는 변경될 수 있습니다.

현재 fetch 중인 쿼리 개수(TanStack Query의 useIsFetching)를 render-prop으로 전달하는 컴포넌트입니다. 전역 로딩 인디케이터를 훅을 추가하지 않고도 쉽게 표시할 수 있습니다.


import { IsFetching } from '@suspensive/react-query'
 
const GlobalFetchingIndicator = () => (
  <IsFetching>{(isFetching) => (isFetching ? <Spinner /> : null)}</IsFetching>
)

필터 (QueryFilters)

TanStack Query의 useIsFetching가 받는 QueryFilters와 동일한 필터(queryKey, predicate 등)로 범위를 좁힐 수 있습니다.


import { IsFetching } from '@suspensive/react-query'
 
const PostsFetchingIndicator = () => (
  <IsFetching queryKey={['posts']}>
    {(isFetching) => (isFetching ? <Spinner /> : null)}
  </IsFetching>
)

Props

children: (isFetching: number) => ReactNode
…QueryFilters: TanStack Query useIsFetching의 QueryFilters와 동일한 형태