函式: injectQuery()

注入一個查詢 (query)：宣告式地依賴於與唯一鍵綁定的非同步資料來源。

基本範例

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 的函式會在反應式上下文 (reactive context) 中執行。在以下範例中，當 filter signal 變更為真值 (truthy value) 時，查詢會自動啟用並執行。當 filter signal 變回假值 (falsy value) 時，查詢會被停用。

反應式範例

class ServiceOrComponent {
  filter = signal('')

  todosQuery = injectQuery(() => ({
    queryKey: ['todos', this.filter()],
    queryFn: () => fetchTodos(this.filter()),
    // Signal 可以與表達式結合使用
    enabled: !!this.filter(),
  }))
}

class ServiceOrComponent {
  filter = signal('')

  todosQuery = injectQuery(() => ({
    queryKey: ['todos', this.filter()],
    queryFn: () => fetchTodos(this.filter()),
    // Signal 可以與表達式結合使用
    enabled: !!this.filter(),
  }))
}

參數

一個回傳查詢選項的函式。

參數

要使用的 Angular 注入器 (injector)。

參見

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

injectQuery(optionsFn, injector)

function injectQuery<TQueryFnData, TError, TData, TQueryKey>(
  optionsFn,
  injector?,
): DefinedCreateQueryResult<TData, TError>

function injectQuery<TQueryFnData, TError, TData, TQueryKey>(
  optionsFn,
  injector?,
): 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'),
  }))
}

類似 Angular 的 computed，傳遞給 injectQuery 的函式會在反應式上下文中執行。在以下範例中，當 filter signal 變更為真值時，查詢會自動啟用並執行。當 filter signal 變回假值時，查詢會被停用。

反應式範例

class ServiceOrComponent {
  filter = signal('')

  todosQuery = injectQuery(() => ({
    queryKey: ['todos', this.filter()],
    queryFn: () => fetchTodos(this.filter()),
    // Signal 可以與表達式結合使用
    enabled: !!this.filter(),
  }))
}

class ServiceOrComponent {
  filter = signal('')

  todosQuery = injectQuery(() => ({
    queryKey: ['todos', this.filter()],
    queryFn: () => fetchTodos(this.filter()),
    // Signal 可以與表達式結合使用
    enabled: !!this.filter(),
  }))
}

型別參數

• TQueryFnData = unknown

• TError = Error

• TData = TQueryFnData

• TQueryKey 繼承自 QueryKey = QueryKey

參數

• optionsFn

一個回傳查詢選項的函式。

• injector?: Injector

要使用的 Angular 注入器。

function injectQuery<TQueryFnData, TError, TData, TQueryKey>(
  optionsFn,
  injector?,
): CreateQueryResult<TData, TError>

function injectQuery<TQueryFnData, TError, TData, TQueryKey>(
  optionsFn,
  injector?,
): 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()),
    // Signal 可以與表達式結合使用
    enabled: !!this.filter(),
  }))
}

class ServiceOrComponent {
  filter = signal('')

  todosQuery = injectQuery(() => ({
    queryKey: ['todos', this.filter()],
    queryFn: () => fetchTodos(this.filter()),
    // Signal 可以與表達式結合使用
    enabled: !!this.filter(),
  }))
}

型別參數

• TQueryFnData = unknown

• TError = Error

• TData = TQueryFnData

• TQueryKey 繼承自 QueryKey = QueryKey

參數

• optionsFn

一個回傳查詢選項的函式。

• injector?: Injector

要使用的 Angular 注入器。

function injectQuery<TQueryFnData, TError, TData, TQueryKey>(
  optionsFn,
  injector?,
): CreateQueryResult<TData, TError>

function injectQuery<TQueryFnData, TError, TData, TQueryKey>(
  optionsFn,
  injector?,
): 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()),
    // Signal 可以與表達式結合使用
    enabled: !!this.filter(),
  }))
}

class ServiceOrComponent {
  filter = signal('')

  todosQuery = injectQuery(() => ({
    queryKey: ['todos', this.filter()],
    queryFn: () => fetchTodos(this.filter()),
    // Signal 可以與表達式結合使用
    enabled: !!this.filter(),
  }))
}

型別參數

• TQueryFnData = unknown

• TError = Error

• TData = TQueryFnData

• TQueryKey 繼承自 QueryKey = QueryKey

參數

• optionsFn

一個回傳查詢選項的函式。

• injector?: Injector

要使用的 Angular 注入器。

函數 / injectQuery

函式: injectQuery()

參數

參數

參見

injectQuery(optionsFn, injector)

型別參數

參數

回傳值

參數

參數

參見

參見

定義於

injectQuery(optionsFn, injector)

型別參數

參數

回傳值

參數

參數

參見

參見

定義於

injectQuery(optionsFn, injector)

型別參數

參數

回傳值

參數

參數

參見

參見

定義於

Want to Skip the Docs?

Launch week sale

Want to Skip the Docs?

Launch week sale