@tanstack/angular-query-experimental 5.12.1 → 5.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +84 -0
- package/build/README.md +84 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@tanstack/angular-query-experimental)
|
|
4
|
+
[](https://github.com/TanStack/query/blob/main/LICENSE)
|
|
5
|
+
[](https://bundlephobia.com/package/@tanstack/angular-query-experimental)
|
|
6
|
+
[](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: [provideAngularQuery(new QueryClient())],
|
|
52
|
+
})
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
3. Inject query
|
|
56
|
+
|
|
57
|
+
```ts
|
|
58
|
+
import { injectQuery } from '@tanstack/angular-query-experimental'
|
|
59
|
+
import { Component } from '@angular/core'
|
|
60
|
+
|
|
61
|
+
@Component({...})
|
|
62
|
+
export class TodosComponent {
|
|
63
|
+
info = injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodoList }))
|
|
64
|
+
}
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
4. If you need to update options on your query dynamically, make sure to pass them as signals
|
|
68
|
+
|
|
69
|
+
```ts
|
|
70
|
+
import { injectQuery } from '@tanstack/angular-query-experimental'
|
|
71
|
+
import { signal, Component } from '@angular/core'
|
|
72
|
+
|
|
73
|
+
@Component({...})
|
|
74
|
+
export class TodosComponent {
|
|
75
|
+
id = signal(1)
|
|
76
|
+
enabled = signal(false)
|
|
77
|
+
|
|
78
|
+
info = injectQuery(() => ({
|
|
79
|
+
queryKey: ['todos', this.id()],
|
|
80
|
+
queryFn: fetchTodoList,
|
|
81
|
+
enabled: this.enabled(),
|
|
82
|
+
}))
|
|
83
|
+
}
|
|
84
|
+
```
|
package/build/README.md
ADDED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@tanstack/angular-query-experimental)
|
|
4
|
+
[](https://github.com/TanStack/query/blob/main/LICENSE)
|
|
5
|
+
[](https://bundlephobia.com/package/@tanstack/angular-query-experimental)
|
|
6
|
+
[](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: [provideAngularQuery(new QueryClient())],
|
|
52
|
+
})
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
3. Inject query
|
|
56
|
+
|
|
57
|
+
```ts
|
|
58
|
+
import { injectQuery } from '@tanstack/angular-query-experimental'
|
|
59
|
+
import { Component } from '@angular/core'
|
|
60
|
+
|
|
61
|
+
@Component({...})
|
|
62
|
+
export class TodosComponent {
|
|
63
|
+
info = injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodoList }))
|
|
64
|
+
}
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
4. If you need to update options on your query dynamically, make sure to pass them as signals
|
|
68
|
+
|
|
69
|
+
```ts
|
|
70
|
+
import { injectQuery } from '@tanstack/angular-query-experimental'
|
|
71
|
+
import { signal, Component } from '@angular/core'
|
|
72
|
+
|
|
73
|
+
@Component({...})
|
|
74
|
+
export class TodosComponent {
|
|
75
|
+
id = signal(1)
|
|
76
|
+
enabled = signal(false)
|
|
77
|
+
|
|
78
|
+
info = injectQuery(() => ({
|
|
79
|
+
queryKey: ['todos', this.id()],
|
|
80
|
+
queryFn: fetchTodoList,
|
|
81
|
+
enabled: this.enabled(),
|
|
82
|
+
}))
|
|
83
|
+
}
|
|
84
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/angular-query-experimental",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.14.0",
|
|
4
4
|
"description": "Signals for managing, caching and syncing asynchronous and remote data in Angular",
|
|
5
5
|
"author": "Arnoud de Vries",
|
|
6
6
|
"license": "MIT",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"ngxtension": "^1.0.3",
|
|
25
25
|
"tslib": "^2.6.2",
|
|
26
|
-
"@tanstack/query-core": "5.
|
|
26
|
+
"@tanstack/query-core": "5.14.0"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@analogjs/vite-plugin-angular": "^0.2.18",
|