upstream-tanstack-query/docs/framework/angular/reference/functions/injectQuery.md

id, title

id	title
injectQuery	injectQuery

Call Signature

function injectQuery<TQueryFnData, TError, TData, TQueryKey>(injectQueryFn, options?): DefinedCreateQueryResult<TData, TError>;

Defined in: packages/angular-query-experimental/src/inject-query.ts:69

This overload is selected when initialData is set on the options returned by injectQueryFn, so the resulting data signal is never undefined (unless a select changes TData to include undefined).

Type Parameters

TQueryFnData

TQueryFnData = unknown

TError

TError = Error

TData

TData = TQueryFnData

TQueryKey

TQueryKey extends readonly unknown[] = readonly unknown[]

Parameters

injectQueryFn

() => DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>

A function returning the DefinedInitialDataOptions to use — everything you can pass to injectQuery, with initialData set. Similar to computed from Angular, this function runs in the reactive context, so signals read inside it (in queryKey, enabled, etc.) drive the query.

options?

InjectQueryOptions

Additional configuration

Returns

DefinedCreateQueryResult<TData, TError>

The query result, typed so that data is never undefined (unless a select changes TData to include undefined).

See

• https://tanstack.com/query/latest/docs/framework/angular/guides/queries
• queryOptions to share these options between injectQuery and imperative APIs like queryClient.fetchQuery.

Example

@Component({
  selector: 'posts',
  template: `
    <!-- `postsQuery.data()` is `Post[]`, never `undefined`, thanks to `initialData` — even if a
    refetch fails, so the list stays visible alongside the error. -->
    @if (postsQuery.isError()) {
      <span>Error: {{ postsQuery.error()?.message }}</span>
    }
    <ul>
      @for (post of postsQuery.data(); track post.id) {
        <li>{{ post.title }}</li>
      }
    </ul>
  `,
})
export class Posts {
  readonly postsQuery = injectQuery(() => ({
    queryKey: ['posts'],
    queryFn: fetchPosts,
    initialData: [],
  }))
}

Call Signature

function injectQuery<TQueryFnData, TError, TData, TQueryKey>(injectQueryFn, options?): CreateQueryResult<TData, TError>;

Defined in: packages/angular-query-experimental/src/inject-query.ts:158

Injects a query: a declarative dependency on an asynchronous source of data that is tied to a unique key.

Type Parameters

TQueryFnData

TQueryFnData = unknown

TError

TError = Error

TData

TData = TQueryFnData

TQueryKey

TQueryKey extends readonly unknown[] = readonly unknown[]

Parameters

injectQueryFn

() => UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>

A function returning the UndefinedInitialDataOptions to use — everything you can pass to injectQuery. Similar to computed from Angular, this function runs in the reactive context, so signals read inside it (in queryKey, enabled, etc.) drive the query.

options?

InjectQueryOptions

Additional configuration

Returns

CreateQueryResult<TData, TError>

The query result. status() is 'pending' if there is no cached data to display, 'error' if the last fetch attempt failed, or 'success' if the query has data to display. isPending/isSuccess/ isError are type-guard methods for convenience.

See

• https://tanstack.com/query/latest/docs/framework/angular/guides/queries
• queryOptions to share these options between injectQuery and imperative APIs like queryClient.fetchQuery.

Examples

@Component({
  selector: 'posts',
  template: `
    @if (postsQuery.isPending()) {
      Loading...
    } @else if (postsQuery.isError()) {
      <span>Error: {{ postsQuery.error()?.message }}</span>
    } @else {
      <ul>
        @for (post of postsQuery.data(); track post.id) {
          <li>{{ post.title }}</li>
        }
      </ul>
    }
  `,
})
export class Posts {
  readonly postsQuery = injectQuery(() => ({
    queryKey: ['posts'],
    queryFn: fetchPosts,
  }))
}

Similar to computed from Angular, the function passed to injectQuery runs in the reactive context. In the example below, the query is automatically enabled and executed when the filter signal changes to a truthy value. When the filter signal changes back to a falsy value, the query is disabled.

@Component({
  selector: 'posts',
  template: `
    <input [ngModel]="filter()" (ngModelChange)="filter.set($event)" />
    @if (postsQuery.isPending()) {
      Loading...
    } @else if (postsQuery.isError()) {
      <span>Error: {{ postsQuery.error()?.message }}</span>
    } @else {
      <ul>
        @for (post of postsQuery.data(); track post.id) {
          <li>{{ post.title }}</li>
        }
      </ul>
    }
  `,
})
export class Posts {
  readonly filter = signal('')

  readonly postsQuery = injectQuery(() => ({
    queryKey: ['posts', this.filter()],
    queryFn: () => fetchPosts(this.filter()),
    // Signals can be combined with expressions
    enabled: !!this.filter(),
  }))
}

Call Signature

function injectQuery<TQueryFnData, TError, TData, TQueryKey>(injectQueryFn, options?): CreateQueryResult<TData, TError>;

Defined in: packages/angular-query-experimental/src/inject-query.ts:185

This overload accepts the general CreateQueryOptions shape rather than the initialData-aware overloads above, so whether data is defined can't be inferred from the call site — useful when wrapping injectQuery in your own helper function that forwards caller-provided options.

Type Parameters

TQueryFnData

TQueryFnData = unknown

TError

TError = Error

TData

TData = TQueryFnData

TQueryKey

TQueryKey extends readonly unknown[] = readonly unknown[]

Parameters

injectQueryFn

() => CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>

A function that returns query options. Similar to computed from Angular, this function runs in the reactive context, so signals read inside it (in queryKey, enabled, etc.) drive the query.

options?

InjectQueryOptions

Additional configuration

Returns

CreateQueryResult<TData, TError>

The query result.

See

https://tanstack.com/query/latest/docs/framework/angular/guides/queries