Angular Query

IMPORTANT: This library is currently in an experimental stage. This means that breaking changes may 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.

Functions for fetching, caching and updating asynchronous data in Angular

Documentation

Visit https://tanstack.com/query/latest/docs/framework/angular/overview

Quick Features

Transport/protocol/backend agnostic data fetching (REST, GraphQL, promises, whatever!)
Auto Caching + Refetching (stale-while-revalidate, Window Refocus, Polling/Realtime)
Parallel + Dependent Queries
Mutations + Reactive Query Refetching
Multi-layer Cache + Automatic Garbage Collection
Paginated + Cursor-based Queries
Load-More + Infinite Scroll Queries w/ Scroll Recovery
Request Cancellation
Dedicated Devtools

Quick Start

The Angular adapter for TanStack Query requires Angular 16 or higher.

Install angular-query

bash

$ npm i @tanstack/angular-query-experimental

bash

$ pnpm add @tanstack/angular-query-experimental

bash

$ yarn add @tanstack/angular-query-experimental

bash

$ bun add @tanstack/angular-query-experimental

Initialize TanStack Query by adding provideTanStackQuery to your application

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

bootstrapApplication(AppComponent, {
  providers: [provideTanStackQuery(new QueryClient())],
})

or in a NgModule-based app

import { provideHttpClient } from '@angular/common/http'
import {
  provideTanStackQuery,
  QueryClient,
} from '@tanstack/angular-query-experimental'

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [provideTanStackQuery(new QueryClient())],
  bootstrap: [AppComponent],
})

Inject query

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

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

If you need to update options on your query dynamically, make sure to pass them as signals. The query will refetch automatically if data for an updated query key is stale or not present.

Open in StackBlitz

@Component({})
export class PostComponent {
  #postsService = inject(PostsService)
  postId = input.required({
    transform: numberAttribute,
  })

  postQuery = injectQuery(() => ({
    queryKey: ['post', this.postId()],
    queryFn: () => {
      return lastValueFrom(this.#postsService.postById$(this.postId()))
    },
  }))
}

@Injectable({
  providedIn: 'root',
})
export class PostsService {
  #http = inject(HttpClient)

  postById$ = (postId: number) =>
    this.#http.get<Post>(`https://jsonplaceholder.typicode.com/posts/${postId}`)
}

export interface Post {
  id: number
  title: string
  body: string
}