Übersicht

WICHTIG: Diese Bibliothek befindet sich derzeit in einem experimentellen Stadium. Das bedeutet, dass es zu Breaking Changes in Minor- UND Patch-Releases kommen wird. Aktualisieren Sie vorsichtig. Wenn Sie dies während des experimentellen Stadiums in der Produktion verwenden, sperren Sie bitte Ihre Version auf eine Patch-Level-Version, um unerwartete Breaking Changes zu vermeiden.

Das Paket @tanstack/angular-query-experimental bietet eine 1st-Class-API für die Verwendung von TanStack Query über Angular.

Wir sind dabei, eine stabile API für TanStack Query unter Angular zu entwickeln. Wenn Sie Feedback haben, kontaktieren Sie uns bitte auf dem TanStack Discord-Server oder besuchen Sie diese Diskussion auf Github.

TanStack Query ist mit Angular v16 und höher kompatibel.

TanStack Query (ehemals React Query) wird oft als die fehlende Datenabruf-Bibliothek für Webanwendungen beschrieben, aber in technischeren Begriffen macht es das Abrufen, Cachen, Synchronisieren und Aktualisieren von Serverzuständen in Ihren Webanwendungen zum Kinderspiel.

Die meisten Kern-Webframeworks bieten keine eigene, etablierte Methode für den abgerundeten Datenabruf oder die Datenaktualisierung. Aus diesem Grund entwickeln Entwickler entweder Metaprogramme, die strenge Meinungen über den Datenabruf kapseln, oder erfinden ihre eigenen Wege, um Daten abzurufen. Dies bedeutet normalerweise, dass sie komponentenbasierte Zustände und Nebeneffekte zusammenstückeln oder allgemeinere Zustandsverwaltungsbibliotheken verwenden, um asynchrone Daten in ihren Apps zu speichern und bereitzustellen.

Während die meisten traditionellen Zustandsverwaltungsbibliotheken hervorragend für die Arbeit mit Client-Zuständen geeignet sind, sind sie nicht so gut für die Arbeit mit asynchronen oder Server-Zuständen. Das liegt daran, dass Server-Zustände völlig anders sind. Zunächst einmal:

• Wird remote an einem Ort gespeichert, den Sie möglicherweise nicht kontrollieren oder besitzen
• Erfordert asynchrone APIs zum Abrufen und Aktualisieren
• Impliziert geteilte Eigentümerschaft und kann von anderen Personen ohne Ihr Wissen geändert werden
• Kann in Ihren Anwendungen potenziell "veraltet" sein, wenn Sie nicht vorsichtig sind

Sobald Sie die Natur von Server-Zuständen in Ihrer Anwendung verstanden haben, entstehen weitere Herausforderungen, wie zum Beispiel:

• Caching... (möglicherweise das Schwierigste in der Programmierung)
• Deduzierung mehrerer Anfragen für dieselben Daten zu einer einzigen Anfrage
• Aktualisieren von "veralteten" Daten im Hintergrund
• Wissen, wann Daten "veraltet" sind
• Reflektieren von Datenaktualisierungen so schnell wie möglich
• Leistungsoptimierungen wie Paginierung und verzögertes Laden von Daten
• Verwaltung von Speicher und Garbage Collection von Server-Zuständen
• Memoizing von Query-Ergebnissen mit struktureller Teilung

Wenn Sie von dieser Liste nicht überfordert sind, dann müssen Sie wahrscheinlich bereits alle Ihre Server-Zustandsprobleme gelöst haben und verdienen eine Auszeichnung. Wenn Sie jedoch wie die überwiegende Mehrheit der Menschen sind, müssen Sie entweder noch alle oder die meisten dieser Herausforderungen bewältigen, und wir kratzen nur an der Oberfläche!

TanStack Query ist zweifellos eine der besten Bibliotheken für die Verwaltung von Server-Zuständen. Sie funktioniert erstaunlich gut out-of-the-box, ohne Konfiguration, und kann nach Belieben angepasst werden, wenn Ihre Anwendung wächst.

TanStack Query ermöglicht es Ihnen, die kniffligen Herausforderungen und Hürden von Server-Zuständen zu besiegen und zu überwinden und Ihre App-Daten zu kontrollieren, bevor sie Sie kontrollieren.

Technisch gesehen wird TanStack Query wahrscheinlich

• Hilft Ihnen, viele Zeilen komplizierten und missverstandenen Codes aus Ihrer Anwendung zu entfernen und durch nur eine Handvoll Zeilen Angular Query-Logik zu ersetzen.
• Ihre Anwendung wartungsfreundlicher machen und das Erstellen neuer Funktionen erleichtern, ohne sich Gedanken über die Verkabelung neuer Server-Zustandsdatenquellen machen zu müssen.
• Beeinflusst Ihre Endbenutzer direkt, indem Ihre Anwendung schneller und reaktionsfreudiger als je zuvor wirkt.
• Potenziell helfen, Bandbreite zu sparen und die Speicherleistung zu verbessern.

Im folgenden Beispiel sehen Sie TanStack Query in seiner grundlegendsten und einfachsten Form, die zum Abrufen der GitHub-Statistiken für das TanStack Query GitHub-Projekt selbst verwendet wird.

In StackBlitz öffnen

import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
import { HttpClient } from '@angular/common/http'
import { CommonModule } from '@angular/common'
import { injectQuery } from '@tanstack/angular-query-experimental'
import { lastValueFrom } from 'rxjs'

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'simple-example',
  standalone: true,
  template: `
    @if (query.isPending()) {
      Loading...
    }
    @if (query.error()) {
      An error has occurred: {{ query.error().message }}
    }
    @if (query.data(); as data) {
      <h1>{{ data.name }}</h1>
      <p>{{ data.description }}</p>
      <strong>👀 {{ data.subscribers_count }}</strong>
      <strong>✨ {{ data.stargazers_count }}</strong>
      <strong>🍴 {{ data.forks_count }}</strong>
    }
  `
})
export class SimpleExampleComponent {
  http = inject(HttpClient)

  query = injectQuery(() => ({
    queryKey: ['repoData'],
    queryFn: () =>
      lastValueFrom(
        this.http.get<Response>('https://api.github.com/repos/tanstack/query'),
      ),
  }))
}

interface Response {
  name: string
  description: string
  subscribers_count: number
  stargazers_count: number
  forks_count: number
}

import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
import { HttpClient } from '@angular/common/http'
import { CommonModule } from '@angular/common'
import { injectQuery } from '@tanstack/angular-query-experimental'
import { lastValueFrom } from 'rxjs'

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'simple-example',
  standalone: true,
  template: `
    @if (query.isPending()) {
      Loading...
    }
    @if (query.error()) {
      An error has occurred: {{ query.error().message }}
    }
    @if (query.data(); as data) {
      <h1>{{ data.name }}</h1>
      <p>{{ data.description }}</p>
      <strong>👀 {{ data.subscribers_count }}</strong>
      <strong>✨ {{ data.stargazers_count }}</strong>
      <strong>🍴 {{ data.forks_count }}</strong>
    }
  `
})
export class SimpleExampleComponent {
  http = inject(HttpClient)

  query = injectQuery(() => ({
    queryKey: ['repoData'],
    queryFn: () =>
      lastValueFrom(
        this.http.get<Response>('https://api.github.com/repos/tanstack/query'),
      ),
  }))
}

interface Response {
  name: string
  description: string
  subscribers_count: number
  stargazers_count: number
  forks_count: number
}

• Lernen Sie TanStack Query in Ihrem eigenen Tempo mit unserem erstaunlich gründlichen Schritt-für-Schritt-Anleitung und API-Referenz