Because TanStack Query's fetching mechanisms are agnostically built on Promises, you can use literally any asynchronous data fetching client, including the browser native fetch API, graphql-request, and more.
HttpClient is a powerful and integrated part of Angular, which gives the following benefits:
As TanStack Query is a promise based library, observables from HttpClient need to be converted to promises. This can be done with the lastValueFrom or firstValueFrom functions from rxjs.
@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'),
),
}))
}
Since Angular is moving towards RxJS as an optional dependency, it's expected that HttpClient will also support promises in the future.
Support for observables in TanStack Query for Angular is planned.
Data fetching client | Pros | Cons |
---|---|---|
Angular HttpClient | Featureful and very well integrated with Angular. | Observables need to be converted to Promises. |
Fetch | Browser native API, so adds nothing to bundle size. | Barebones API which lacks many features. |
Specialized libraries such as graphql-request | Specialized features for specific use cases. | If it's not an Angular library it won't integrate well with the framework. |