Angular HttpClient und andere Datenabruf-Clients

Da die Abrufmechanismen von TanStack Query agnostisch auf Promises basieren, können Sie buchstäblich jeden asynchronen Datenabruf-Client verwenden, einschließlich der nativen Browser-API fetch, graphql-request und mehr.

Der HttpClient ist ein leistungsfähiger und integrierter Teil von Angular, der folgende Vorteile bietet:

• Mock-Antworten in Unit-Tests mit provideHttpClientTesting.
• Interceptors können für eine Vielzahl von Funktionalitäten verwendet werden, z. B. zum Hinzufügen von Authentifizierungsheadern, zur Protokollierung usw. Während einige Datenabruf-Bibliotheken ihr eigenes Interceptor-System haben, sind die Interceptors des HttpClient in das Dependency-Injection-System von Angular integriert.
• Der HttpClient informiert automatisch PendingTasks, wodurch Angular über ausstehende Anfragen informiert wird. Unit-Tests und SSR können die resultierenden Anwendungsinformationen zur *Stabilität* verwenden, um auf den Abschluss ausstehender Anfragen zu warten. Dies erleichtert das Unit-Testing für Zoneless-Anwendungen erheblich.
• Bei Verwendung von SSR cacht der HttpClient Anfragen, die auf dem Server durchgeführt werden. Dies verhindert unnötige Anfragen auf dem Client. Das SSR-Caching des HttpClient funktioniert sofort. TanStack Query verfügt über eine eigene Hydrationsfunktionalität, die leistungsfähiger sein kann, aber einige Einrichtung erfordert. Welche Lösung für Ihre Bedürfnisse am besten geeignet ist, hängt von Ihrem Anwendungsfall ab.

Da TanStack Query eine auf Promises basierende Bibliothek ist, müssen Observables vom HttpClient in Promises konvertiert werden. Dies kann mit den Funktionen lastValueFrom oder firstValueFrom aus rxjs erfolgen.

@Component({
  // ...
})
class ExampleComponent {
  private readonly http = inject(HttpClient)

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

@Component({
  // ...
})
class ExampleComponent {
  private readonly http = inject(HttpClient)

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

Da Angular sich in Richtung RxJS als optionaler Abhängigkeit entwickelt, ist zu erwarten, dass der HttpClient in Zukunft auch Promises unterstützen wird.

Die Unterstützung von Observables in TanStack Query für Angular ist geplant.