IsFetching

Render-prop component that exposes the number of queries currently fetching (from TanStack Query’s useIsFetching). Useful for showing global loading indicators without adding hooks in every component.

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

Filters (QueryFilters)

You can scope the indicator with the same filters accepted by TanStack Query’s useIsFetching (e.g., queryKey, predicate).

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

Props

• children: (isFetching: number) => ReactNode
• …QueryFilters: Same shape as TanStack Query’s QueryFilters for useIsFetching.