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 (useful for app-wide loading indicators).
QueryFilters<readonly unknown[]>
The QueryFilters to narrow down the matched queries.
| 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 |
Additional configuration
| 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). |
Signal<number>
A Signal with the number of queries that your application is currently loading or fetching in the background.
@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()
}