函数：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'),
  }))
}

与 Angular 的 computed 类似，传递给 injectQuery 的函数将在响应式上下文中运行。在下面的示例中，当过滤器信号更改为真值时，查询将自动启用并执行。当过滤器信号变回假值时，查询将被禁用。

响应式示例

class ServiceOrComponent {
  filter = signal('')

  todosQuery = injectQuery(() => ({
    queryKey: ['todos', this.filter()],
    queryFn: () => fetchTodos(this.filter()),
    // 信号可以与表达式组合
    enabled: !!this.filter(),
  }))
}

class ServiceOrComponent {
  filter = signal('')

  todosQuery = injectQuery(() => ({
    queryKey: ['todos', this.filter()],
    queryFn: () => fetchTodos(this.filter()),
    // 信号可以与表达式组合
    enabled: !!this.filter(),
  }))
}

参数

返回查询选项的函数。

参数

附加配置

另请参阅

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

调用签名

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

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

注入一个查询：对异步数据源的声明性依赖，该数据源与唯一键绑定。

基本示例

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'),
  }))
}

响应式示例

class ServiceOrComponent {
  filter = signal('')

  todosQuery = injectQuery(() => ({
    queryKey: ['todos', this.filter()],
    queryFn: () => fetchTodos(this.filter()),
    // 信号可以与表达式组合
    enabled: !!this.filter(),
  }))
}

class ServiceOrComponent {
  filter = signal('')

  todosQuery = injectQuery(() => ({
    queryKey: ['todos', this.filter()],
    queryFn: () => fetchTodos(this.filter()),
    // 信号可以与表达式组合
    enabled: !!this.filter(),
  }))
}

类型参数

• TQueryFnData = unknown

• TError = Error

• TData = TQueryFnData

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

参数

injectQueryFn

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

返回查询选项的函数。

options?

InjectQueryOptions

附加配置

返回值

DefinedCreateQueryResult<TData, TError>

查询结果。

参数

返回查询选项的函数。

参数

附加配置

调用签名

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

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

注入一个查询：对异步数据源的声明性依赖，该数据源与唯一键绑定。

基本示例

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'),
  }))
}

响应式示例

class ServiceOrComponent {
  filter = signal('')

  todosQuery = injectQuery(() => ({
    queryKey: ['todos', this.filter()],
    queryFn: () => fetchTodos(this.filter()),
    // 信号可以与表达式组合
    enabled: !!this.filter(),
  }))
}

class ServiceOrComponent {
  filter = signal('')

  todosQuery = injectQuery(() => ({
    queryKey: ['todos', this.filter()],
    queryFn: () => fetchTodos(this.filter()),
    // 信号可以与表达式组合
    enabled: !!this.filter(),
  }))
}

类型参数

• TQueryFnData = unknown

• TError = Error

• TData = TQueryFnData

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

参数

injectQueryFn

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

返回查询选项的函数。

options?

InjectQueryOptions

附加配置

返回值

CreateQueryResult<TData, TError>

查询结果。

参数

返回查询选项的函数。

参数

附加配置

另请参阅

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

另请参阅

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

定义于

inject-query.ts:118

调用签名

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

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

注入一个查询：对异步数据源的声明性依赖，该数据源与唯一键绑定。

基本示例

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'),
  }))
}

响应式示例

class ServiceOrComponent {
  filter = signal('')

  todosQuery = injectQuery(() => ({
    queryKey: ['todos', this.filter()],
    queryFn: () => fetchTodos(this.filter()),
    // 信号可以与表达式组合
    enabled: !!this.filter(),
  }))
}

class ServiceOrComponent {
  filter = signal('')

  todosQuery = injectQuery(() => ({
    queryKey: ['todos', this.filter()],
    queryFn: () => fetchTodos(this.filter()),
    // 信号可以与表达式组合
    enabled: !!this.filter(),
  }))
}