On this page
- Function: injectQuery()
- Param
- Param
- See
- Call Signature
- Type Parameters
- Parameters
- injectQueryFn
- options?
- Returns
- Param
- Param
- See
- See
- Defined in
- Call Signature
- Type Parameters
- Parameters
- injectQueryFn
- options?
- Returns
- Param
- Param
- See
- See
- Defined in
- Call Signature
- Type Parameters
- Parameters
- injectQueryFn
- options?
- Returns
- Param
- Param
- See
- See
- Defined in
injectQuery
Function: injectQuery()
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'),
}))
}
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>
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'),
}))
}
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(),
}))
}
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?
Additional configuration
Returns
DefinedCreateQueryResult<TData, TError>
The query result.
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
Defined in
Call Signature
function injectQuery<TQueryFnData, TError, TData, TQueryKey>(
injectQueryFn,
options?,
): CreateQueryResult<TData, TError>
function injectQuery<TQueryFnData, TError, TData, TQueryKey>(
injectQueryFn,
options?,
): CreateQueryResult<TData, TError>
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'),
}))
}
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(),
}))
}
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?
Additional configuration
Returns
CreateQueryResult<TData, TError>
The query result.
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
Defined in
Call Signature
function injectQuery<TQueryFnData, TError, TData, TQueryKey>(
injectQueryFn,
options?,
): CreateQueryResult<TData, TError>
function injectQuery<TQueryFnData, TError, TData, TQueryKey>(
injectQueryFn,
options?,
): CreateQueryResult<TData, TError>
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'),
}))
}
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(),
}))
}
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?
Additional configuration
Returns
CreateQueryResult<TData, TError>
The query result.
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
