injectIsFetching.md

id	injectIsFetching
title	injectIsFetching

function injectIsFetching(filters?: QueryFilters<readonly unknown[]>, options?: InjectIsFetchingOptions): Signal<number>;

Defined in: packages/angular-query-experimental/src/inject-is-fetching.ts:63

Injects a signal that tracks the number of queries that your application is loading or fetching in the background by default (useful for app-wide loading indicators).

Parameters

filters?

QueryFilters<readonly unknown[]>

The QueryFilters to narrow down the matched queries. fetchStatus defaults to 'fetching' when omitted or undefined; set it to 'paused' or 'idle' to count queries in that status instead.

filters properties

Property	Type	Default value	Description
exact?	boolean	undefined	Match query key exactly
fetchStatus?	"fetching" | "paused" | "idle"	undefined	Include queries matching their fetchStatus
predicate?	(query: Query) => boolean	undefined	Include queries matching this predicate function
queryKey?	TQueryKey | TuplePrefixes<TQueryKey>	undefined	Include queries matching this query key
stale?	boolean	undefined	Include or exclude stale queries
type?	QueryTypeFilter	'all'	Filter to active queries, inactive queries or all queries

options?

InjectIsFetchingOptions

Additional configuration

options properties

Property	Type	Description
injector?	Injector	The Injector in which to create the isFetching signal. If this is not provided, the current injection context will be used instead (via inject).

Returns

Signal<number>

A Signal with the number of matching queries with the requested fetchStatus.

Examples

@Component({
  selector: 'posts-fetching-indicator',
  template: `
    @if (isFetchingPosts()) {
      <span>Refreshing posts...</span>
    }
  `,
})
export class PostsFetchingIndicator {
  // How many queries matching the posts prefix are fetching?
  readonly isFetchingPosts = injectIsFetching({ queryKey: ['posts'] })
}

A global loading indicator for any query fetching in the background, not just the ones on screen:

@Component({
  selector: 'global-loading-indicator',
  template: `
    @if (isFetching()) {
      <div>Queries are fetching in the background...</div>
    }
  `,
})
export class GlobalLoadingIndicator {
  readonly isFetching = injectIsFetching()
}