IMPORTANT: This library is currently in an experimental stage. This means that breaking changes will happen in minor AND patch releases. Upgrade carefully. If you use this in production while in experimental stage, please lock your version to a patch-level version to avoid unexpected breaking changes.
The @tanstack/angular-query-experimental package offers a 1st-class API for using TanStack Query via Angular.
We are in the process of getting to a stable API for Angular Query. If you have any feedback, please contact us at the TanStack Discord server or visit this discussion on Github.
Angular Query is compatible with Angular v16 and higher.
TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze.
Most core web frameworks do not come with an opinionated way of fetching or updating data in a holistic way. Because of this developers end up building either meta-frameworks which encapsulate strict opinions about data-fetching, or they invent their own ways of fetching data. This usually means cobbling together component-based state and side-effects, or using more general purpose state management libraries to store and provide asynchronous data throughout their apps.
While most traditional state management libraries are great for working with client state, they are not so great at working with async or server state. This is because server state is totally different. For starters, server state:
Once you grasp the nature of server state in your application, even more challenges will arise as you go, for example:
If you're not overwhelmed by that list, then that must mean that you've probably solved all of your server state problems already and deserve an award. However, if you are like a vast majority of people, you either have yet to tackle all or most of these challenges and we're only scratching the surface!
Angular Query is hands down one of the best libraries for managing server state. It works amazingly well out-of-the-box, with zero-config, and can be customized to your liking as your application grows.
Angular Query allows you to defeat and overcome the tricky challenges and hurdles of server state and control your app data before it starts to control you.
On a more technical note, Angular Query will likely:
In the example below, you can see Angular Query in its most basic and simple form being used to fetch the GitHub stats for the TanStack Query GitHub project itself:
import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental'
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>
}
<angular-query-devtools initialIsOpen />
`,
imports: [AngularQueryDevtools],
})
export class SimpleExampleComponent {
http = inject(HttpClient)
query = injectQuery(() => ({
queryKey: ['repoData'],
queryFn: () =>
lastValueFrom(
this.http.get<Response>('https://api.github.com/repos/tanstack/query'),
),
}))
}
type Response = {
name: string
description: string
subscribers_count: number
stargazers_count: number
forks_count: number
}
import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental'
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>
}
<angular-query-devtools initialIsOpen />
`,
imports: [AngularQueryDevtools],
})
export class SimpleExampleComponent {
http = inject(HttpClient)
query = injectQuery(() => ({
queryKey: ['repoData'],
queryFn: () =>
lastValueFrom(
this.http.get<Response>('https://api.github.com/repos/tanstack/query'),
),
}))
}
type Response = {
name: string
description: string
subscribers_count: number
stargazers_count: number
forks_count: number
}