Funktion: injectQuery()

Injectt eine Query: eine deklarative Abhängigkeit von einer asynchronen Datenquelle, die an einen eindeutigen Schlüssel gebunden ist.

Einfaches Beispiel

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

Ähnlich wie computed aus Angular wird die an injectQuery übergebene Funktion im reaktiven Kontext ausgeführt. Im folgenden Beispiel wird die Query automatisch aktiviert und ausgeführt, wenn sich das Filter-Signal zu einem wahrheitsgemäßen Wert ändert. Wenn sich das Filter-Signal wieder zu einem unwahrheitsgemäßen Wert ändert, wird die Query deaktiviert.

Reaktives Beispiel

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

Eine Funktion, die Query-Optionen zurückgibt.

Param

Zusätzliche Konfiguration

Siehe

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

Aufruf-Signatur

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

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

Injectt eine Query: eine deklarative Abhängigkeit von einer asynchronen Datenquelle, die an einen eindeutigen Schlüssel gebunden ist.

Einfaches Beispiel

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

Reaktives Beispiel

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

Typparameter

• TQueryFnData = unbekannt

• TError = Error

• TData = TQueryFnData

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

Parameter

injectQueryFn

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

Eine Funktion, die Query-Optionen zurückgibt.

options?

InjectQueryOptions

Zusätzliche Konfiguration

Gibt zurück

DefinedCreateQueryResult<TData, TError>

Das Query-Ergebnis.

Param

Eine Funktion, die Query-Optionen zurückgibt.

Param

Zusätzliche Konfiguration

Aufruf-Signatur

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

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

Injectt eine Query: eine deklarative Abhängigkeit von einer asynchronen Datenquelle, die an einen eindeutigen Schlüssel gebunden ist.

Einfaches Beispiel

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

Reaktives Beispiel

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

Typparameter

• TQueryFnData = unbekannt

• TError = Error

• TData = TQueryFnData

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

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

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

Injectt eine Query: eine deklarative Abhängigkeit von einer asynchronen Datenquelle, die an einen eindeutigen Schlüssel gebunden ist.

Einfaches Beispiel

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

Reaktives Beispiel

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

Typparameter

• TQueryFnData = unbekannt

• TError = Error

• TData = TQueryFnData

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

injectQuery

Funktion: injectQuery()

Param

Param

Siehe

Aufruf-Signatur

Typparameter

Parameter

injectQueryFn

options?

Gibt zurück

Param

Param

Siehe

Siehe

Definiert in

Aufruf-Signatur

Typparameter

Parameter

injectQueryFn

options?

Gibt zurück

Param

Param

Siehe

Siehe

Definiert in

Aufruf-Signatur

Typparameter

Parameter

injectQueryFn

options?

Gibt zurück

Param

Param

Siehe

Siehe

Definiert in

Möchten Sie die Dokumentation überspringen?

Möchten Sie die Dokumentation überspringen?