函数: 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 的函数将在响应式上下文中运行。在下面的示例中，当 filter signal 变为真值时，查询将自动启用并执行。当 filter signal 变回假值时，查询将被禁用。

响应式示例

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

返回查询选项的函数。

Param

附加配置

参见

https://tanstack.com.cn/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()),
    // 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(),
  }))
}

类型参数

• TQueryFnData = unknown

• TError = Error

• TData = TQueryFnData

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

参数

injectQueryFn

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

返回查询选项的函数。

options?

InjectQueryOptions

附加配置

Returns (返回)

DefinedCreateQueryResult<TData, TError>

查询结果。

Param

返回查询选项的函数。

Param

附加配置

调用签名

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

类型参数

• TQueryFnData = unknown

• TError = Error

• TData = TQueryFnData

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

参数

injectQueryFn

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

返回查询选项的函数。

options?

InjectQueryOptions

附加配置

Returns (返回)

CreateQueryResult<TData, TError>

查询结果。

Param

返回查询选项的函数。

Param

附加配置

参见

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

参见

https://tanstack.com.cn/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()),
    // 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(),
  }))
}