@tanstack/angular-query-experimental v5.37.1
Angular Query
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.
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
Angular Query requires Angular 16.
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 Angular Query by adding provideAngularQuery to your application
import { provideAngularQuery } from '@tanstack/angular-query-experimental' import { QueryClient } from '@tanstack/angular-query-experimental' bootstrapApplication(AppComponent, { providers: [provideAngularQuery(new QueryClient())], })
or in a NgModule-based app
import { provideHttpClient } from '@angular/common/http' import { provideAngularQuery, QueryClient, } from '@tanstack/angular-query-experimental' @NgModule({ declarations: [AppComponent], imports: [BrowserModule], providers: [provideAngularQuery(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
import { injectQuery } from '@tanstack/angular-query-experimental' import { signal, Component } from '@angular/core' @Component({...}) export class TodosComponent { id = signal(1) enabled = signal(false) info = injectQuery(() => ({ queryKey: ['todos', this.id()], queryFn: fetchTodoList, enabled: this.enabled(), })) }
4 days ago
6 days ago
9 days ago
9 days ago
11 days ago
11 days ago
14 days ago
16 days ago
17 days ago
16 days ago
18 days ago
21 days ago
21 days ago
29 days ago
30 days ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago