Skip to content

Commit 04c9752

Browse files
committed
docs(angular-query): add readme
1 parent f459f28 commit 04c9752

File tree

1 file changed

+86
-0
lines changed

1 file changed

+86
-0
lines changed
Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
![TanStack Query Header](https://github.com/TanStack/query/raw/main/media/repo-header.png)
2+
3+
[![npm version](https://img.shields.io/npm/v/@tanstack/vue-query)](https://www.npmjs.com/package/@tanstack/angular-query-experimental)
4+
[![npm license](https://img.shields.io/npm/l/@tanstack/vue-query)](https://github.com/TanStack/query/blob/main/LICENSE)
5+
[![bundle size](https://img.shields.io/bundlephobia/minzip/@tanstack/angular-query-experimental)](https://bundlephobia.com/package/@tanstack/angular-query-experimental)
6+
[![npm](https://img.shields.io/npm/dm/@tanstack/angular-query-experimental)](https://www.npmjs.com/package/@tanstack/angular-query-experimental)
7+
8+
# Angular Query
9+
10+
> This library is currently in an experimental stage. This means that breaking changes will happen in minor AND patch releases. Use at your own risk. If you choose to rely on this in production in an experimental stage, please lock your version to a patch-level version to avoid unexpected breakages.
11+
12+
Functions for fetching, caching and updating asynchronous data in Angular
13+
14+
# Documentation
15+
16+
Visit https://tanstack.com/query/latest/docs/angular/overview
17+
18+
## Quick Features
19+
20+
- Transport/protocol/backend agnostic data fetching (REST, GraphQL, promises, whatever!)
21+
- Auto Caching + Refetching (stale-while-revalidate, Window Refocus, Polling/Realtime)
22+
- Parallel + Dependent Queries
23+
- Mutations + Reactive Query Refetching
24+
- Multi-layer Cache + Automatic Garbage Collection
25+
- Paginated + Cursor-based Queries
26+
- Load-More + Infinite Scroll Queries w/ Scroll Recovery
27+
- Request Cancellation
28+
- Dedicated Devtools
29+
30+
# Quick Start
31+
32+
> Angular Query requires Angular 17.
33+
34+
1. Install `angular-query`
35+
36+
```bash
37+
$ npm i @tanstack/angular-query-experimental
38+
# or
39+
$ pnpm add @tanstack/angular-query-experimental
40+
# or
41+
$ yarn add @tanstack/angular-query-experimental
42+
```
43+
44+
2. Initialize **Angular Query** by adding **provideAngularQuery** to your application
45+
46+
```ts
47+
import { provideAngularQuery } from '@tanstack/angular-query-experimental'
48+
import { QueryClient } from '@tanstack/angular-query-experimental'
49+
50+
bootstrapApplication(AppComponent, {
51+
providers: [
52+
provideAngularQuery(new QueryClient())
53+
]
54+
});
55+
```
56+
57+
3. Inject query
58+
59+
```ts
60+
import { injectQuery } from '@tanstack/angular-query-experimental'
61+
import { Component } from '@angular/core'
62+
63+
@Component({...})
64+
export class TodosComponent {
65+
info = injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodoList }))
66+
}
67+
```
68+
69+
4. If you need to update options on your query dynamically, make sure to pass them as signals
70+
71+
```ts
72+
import { injectQuery } from '@tanstack/angular-query-experimental'
73+
import { signal, Component } from '@angular/core'
74+
75+
@Component({...})
76+
export class TodosComponent {
77+
id = signal(1)
78+
enabled = signal(false)
79+
80+
info = injectQuery(() => ({
81+
queryKey: ['todos', this.id()],
82+
queryFn: fetchTodoList,
83+
enabled: this.enabled(),
84+
}))
85+
}
86+
```

0 commit comments

Comments
 (0)