injectIsFetching

function injectIsFetching(filters?: Omit<QueryFilters<readonly unknown[]>, "fetchStatus">, 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).

Parameters

filters?

Omit<QueryFilters<readonly unknown[]>, "fetchStatus">

The QueryFilters to narrow down the matched queries.

filters properties

Built from QueryFilters. See the type above for what it changes.

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 queries that your application is currently loading or fetching in the background.

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()
}