Queries

Eine Abfrage ist eine deklarative Abhängigkeit von einer asynchronen Datenquelle, die an einen eindeutigen Schlüssel gebunden ist. Eine Abfrage kann mit jeder Promise-basierten Methode (einschließlich GET- und POST-Methoden) verwendet werden, um Daten von einem Server abzurufen. Wenn Ihre Methode Daten auf dem Server modifiziert, empfehlen wir stattdessen die Verwendung von Mutationen.

Um Ihre Komponenten oder Dienste mit einer Abfrage zu abonnieren, rufen Sie injectQuery mit mindestens Folgendem auf:

• Einem eindeutigen Schlüssel für die Query
• Eine Funktion, die eine Promise oder ein Observable zurückgibt, das
  • Die Daten auflöst oder
  • Einen Fehler auslöst

import { injectQuery } from '@tanstack/angular-query-experimental'

export class TodosComponent {
  info = injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodoList }))
}

import { injectQuery } from '@tanstack/angular-query-experimental'

export class TodosComponent {
  info = injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodoList }))
}

Der eindeutige Schlüssel, den Sie angeben, wird intern für das erneute Abrufen, Caching und Teilen Ihrer Queries in Ihrer gesamten Anwendung verwendet.

Das von injectQuery zurückgegebene Abfrageergebnis enthält alle Informationen über die Abfrage, die Sie für die Vorlagenerstellung und jede andere Verwendung der Daten benötigen.

result = injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodoList }))

result = injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodoList }))

Das result-Objekt enthält einige sehr wichtige Zustände, die Sie kennen müssen, um produktiv zu sein. Eine Query kann zu jedem Zeitpunkt nur in einem der folgenden Zustände sein:

• isPending oder status === 'pending' - Die Query hat noch keine Daten.
• isError oder status === 'error' - Die Query ist auf einen Fehler gestoßen.
• isSuccess oder status === 'success' - Die Query war erfolgreich und Daten sind verfügbar.

Zusätzlich zu diesen primären Zuständen stehen je nach Zustand der Query weitere Informationen zur Verfügung.

• error - Wenn sich die Query im isError-Zustand befindet, ist der Fehler über die error-Eigenschaft verfügbar.
• data - Wenn sich die Query im isSuccess-Zustand befindet, sind die Daten über die data-Eigenschaft verfügbar.
• isFetching - In jedem Zustand, wenn die Query zu irgendeinem Zeitpunkt Daten abruft (einschließlich Hintergrundabfragen), ist isFetching true.

Für die meisten Queries ist es in der Regel ausreichend, den isPending-Zustand zu prüfen, dann den isError-Zustand und schließlich davon auszugehen, dass die Daten verfügbar sind, und den erfolgreichen Zustand zu rendern.

@Component({
  selector: 'todos',
  standalone: true,
  template: `
    @if (todos.isPending()) {
      <span>Loading...</span>
    } @else if (todos.isError()) {
      <span>Error: {{ todos.error()?.message }}</span>
    } @else {
      <!-- We can assume by this point that status === 'success' -->
      @for (todo of todos.data(); track todo.id) {
        <li>{{ todo.title }}</li>
      } @empty {
        <li>No todos found</li>
      }
    }
  `,
})
export class PostsComponent {
  todos = injectQuery(() => ({
    queryKey: ['todos'],
    queryFn: fetchTodoList,
  }))
}

@Component({
  selector: 'todos',
  standalone: true,
  template: `
    @if (todos.isPending()) {
      <span>Loading...</span>
    } @else if (todos.isError()) {
      <span>Error: {{ todos.error()?.message }}</span>
    } @else {
      <!-- We can assume by this point that status === 'success' -->
      @for (todo of todos.data(); track todo.id) {
        <li>{{ todo.title }}</li>
      } @empty {
        <li>No todos found</li>
      }
    }
  `,
})
export class PostsComponent {
  todos = injectQuery(() => ({
    queryKey: ['todos'],
    queryFn: fetchTodoList,
  }))
}

Wenn Booleans nicht Ihr Ding sind, können Sie auch den status-Zustand verwenden.

@Component({
  selector: 'todos',
  standalone: true,
  template: `
    @switch (todos.status()) {
      @case ('pending') {
        <span>Loading...</span>
      }
      @case ('error') {
        <span>Error: {{ todos.error()?.message }}</span>
      }
      <!-- also status === 'success', but "else" logic works, too -->
      @default {
        <ul>
          @for (todo of todos.data(); track todo.id) {
            <li>{{ todo.title }}</li>
          } @empty {
            <li>No todos found</li>
          }
        </ul>
      }
    }
  `,
})
class TodosComponent {}

@Component({
  selector: 'todos',
  standalone: true,
  template: `
    @switch (todos.status()) {
      @case ('pending') {
        <span>Loading...</span>
      }
      @case ('error') {
        <span>Error: {{ todos.error()?.message }}</span>
      }
      <!-- also status === 'success', but "else" logic works, too -->
      @default {
        <ul>
          @for (todo of todos.data(); track todo.id) {
            <li>{{ todo.title }}</li>
          } @empty {
            <li>No todos found</li>
          }
        </ul>
      }
    }
  `,
})
class TodosComponent {}

TypeScript wird auch den Typ von data korrekt einschränken, wenn Sie vor dem Zugriff darauf auf pending und error geprüft haben.

Zusätzlich zum status-Feld erhalten Sie eine zusätzliche fetchStatus-Eigenschaft mit den folgenden Optionen:

• fetchStatus === 'fetching' - Die Query ruft gerade Daten ab.
• fetchStatus === 'paused' – Die Abfrage wollte abrufen, ist aber pausiert. Lesen Sie mehr darüber im Leitfaden zum Netzwerkmodus.
• fetchStatus === 'idle' - Die Query tut im Moment nichts.

Hintergrundaktualisierungen und Stale-While-Revalidate-Logik machen alle Kombinationen für status und fetchStatus möglich. Zum Beispiel:

• Eine Query im success-Zustand hat normalerweise einen idle fetchStatus, könnte aber auch fetching sein, wenn eine Hintergrundaktualisierung stattfindet.
• Eine Query, die gemountet wird und keine Daten hat, befindet sich normalerweise im pending-Zustand und im fetching fetchStatus, könnte aber auch paused sein, wenn keine Netzwerkverbindung besteht.

Denken Sie also daran, dass eine Query im pending-Zustand sein kann, ohne tatsächlich Daten abzurufen. Als Faustregel gilt:

• Der status gibt Auskunft über die data: Haben wir welche oder nicht?
• Der fetchStatus gibt Auskunft über die queryFn: Läuft sie oder nicht?