📄 tanstack/query/latest/docs/framework/angular/reference/functions/injectquery

class ServiceOrComponent {
  query = injectQuery(() => ({
    queryKey: ['repoData'],
    queryFn: () =>
      this.#http.get<Response>('https://api.github.com/repos/tanstack/query'),
  }))
}


class ServiceOrComponent {
  query = injectQuery(() => ({
    queryKey: ['repoData'],
    queryFn: () =>
      this.#http.get<Response>('https://api.github.com/repos/tanstack/query'),
  }))
}

Similar to computed from Angular, the function passed to injectQuery will be run in the reactive context. In the example below, the query will be 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 will be disabled.

Reactive example

class ServiceOrComponent {
  filter = signal('')

  todosQuery = injectQuery(() => ({
    queryKey: ['todos', this.filter()],
    queryFn: () => fetchTodos(this.filter()),
    // Signals can be combined with expressions
    enabled: !!this.filter(),
  }))
}


class ServiceOrComponent {
  filter = signal('')

  todosQuery = injectQuery(() => ({
    queryKey: ['todos', this.filter()],
    queryFn: () => fetchTodos(this.filter()),
    // Signals can be combined with expressions
    enabled: !!this.filter(),
  }))
}

Param
-----

A function that returns query options.

Param
-----

Additional configuration

See
---

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

Call Signature
--------------

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


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

Defined in: inject-query.ts:65

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

Basic example

class ServiceOrComponent {
  query = injectQuery(() => ({
    queryKey: ['repoData'],
    queryFn: () =>
      this.#http.get<Response>('https://api.github.com/repos/tanstack/query'),
  }))
}


class ServiceOrComponent {
  query = injectQuery(() => ({
    queryKey: ['repoData'],
    queryFn: () =>
      this.#http.get<Response>('https://api.github.com/repos/tanstack/query'),
  }))
}

Reactive example

class ServiceOrComponent {
  filter = signal('')

  todosQuery = injectQuery(() => ({
    queryKey: ['todos', this.filter()],
    queryFn: () => fetchTodos(this.filter()),
    // Signals can be combined with expressions
    enabled: !!this.filter(),
  }))
}


class ServiceOrComponent {
  filter = signal('')

  todosQuery = injectQuery(() => ({
    queryKey: ['todos', this.filter()],
    queryFn: () => fetchTodos(this.filter()),
    // Signals can be combined with expressions
    enabled: !!this.filter(),
  }))
}

### Type Parameters

• TQueryFnData = unknown

• TError = Error

• TData = TQueryFnData

• TQueryKey extends readonly unknown[] = readonly unknown[]

### Parameters #### injectQueryFn

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

A function that returns query options.

#### options?

InjectQueryOptions

Additional configuration

### Returns

DefinedCreateQueryResult <TData, TError>

The query result.

### Param

A function that returns query options.

### Param

Additional configuration

### See

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

### See

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

Call Signature
--------------

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


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

Defined in: inject-query.ts:116

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

Basic example

class ServiceOrComponent {
  query = injectQuery(() => ({
    queryKey: ['repoData'],
    queryFn: () =>
      this.#http.get<Response>('https://api.github.com/repos/tanstack/query'),
  }))
}


class ServiceOrComponent {
  query = injectQuery(() => ({
    queryKey: ['repoData'],
    queryFn: () =>
      this.#http.get<Response>('https://api.github.com/repos/tanstack/query'),
  }))
}

Reactive example

class ServiceOrComponent {
  filter = signal('')

  todosQuery = injectQuery(() => ({
    queryKey: ['todos', this.filter()],
    queryFn: () => fetchTodos(this.filter()),
    // Signals can be combined with expressions
    enabled: !!this.filter(),
  }))
}


class ServiceOrComponent {
  filter = signal('')

  todosQuery = injectQuery(() => ({
    queryKey: ['todos', this.filter()],
    queryFn: () => fetchTodos(this.filter()),
    // Signals can be combined with expressions
    enabled: !!this.filter(),
  }))
}

### Type Parameters

• TQueryFnData = unknown

• TError = Error

• TData = TQueryFnData

• TQueryKey extends readonly unknown[] = readonly unknown[]

### Parameters #### injectQueryFn

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

A function that returns query options.

#### options?

InjectQueryOptions

Additional configuration

### Returns

CreateQueryResult <TData, TError>

The query result.

### Param

A function that returns query options.

### Param

Additional configuration

### See

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

### See

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

Call Signature
--------------

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


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

Defined in: inject-query.ts:167

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

Basic example

class ServiceOrComponent {
  query = injectQuery(() => ({
    queryKey: ['repoData'],
    queryFn: () =>
      this.#http.get<Response>('https://api.github.com/repos/tanstack/query'),
  }))
}


class ServiceOrComponent {
  query = injectQuery(() => ({
    queryKey: ['repoData'],
    queryFn: () =>
      this.#http.get<Response>('https://api.github.com/repos/tanstack/query'),
  }))
}

Reactive example

class ServiceOrComponent {
  filter = signal('')

  todosQuery = injectQuery(() => ({
    queryKey: ['todos', this.filter()],
    queryFn: () => fetchTodos(this.filter()),
    // Signals can be combined with expressions
    enabled: !!this.filter(),
  }))
}


class ServiceOrComponent {
  filter = signal('')

  todosQuery = injectQuery(() => ({
    queryKey: ['todos', this.filter()],
    queryFn: () => fetchTodos(this.filter()),
    // Signals can be combined with expressions
    enabled: !!this.filter(),
  }))
}

### Type Parameters

• TQueryFnData = unknown

• TError = Error

• TData = TQueryFnData

• TQueryKey extends readonly unknown[] = readonly unknown[]

### Parameters #### injectQueryFn

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

A function that returns query options.

#### options?

InjectQueryOptions

Additional configuration

### Returns

CreateQueryResult <TData, TError>

The query result.

### Param

A function that returns query options.

### Param

Additional configuration

### See

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

### See

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

Edit on GitHub

Angular Reference

Functions / injectMutation

Partners Become a Partner

[###### Want to Skip the Docs?

Query.gg - The Official React Query Course
\

“If you’re serious about *really* understanding React Query, there’s no better way than with query.gg”—Tanner Linsley

Learn More](https://query.gg/?s=tanstack)

scarf analytics