@tanstack/angular-query-experimental
v5.61.1
Published
Signals for managing, caching and syncing asynchronous and remote data in Angular
Downloads
38,301
Readme
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
$ npm i @tanstack/angular-query-experimental
or
$ pnpm add @tanstack/angular-query-experimental
or
$ yarn add @tanstack/angular-query-experimental
or
$ 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.
@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
}