Skip to content

Commit 4977296

Browse files
arnoud-dvarnoud-dv
authored
docs(angular-query): update overview and readme (#7994)
1 parent cc20045 commit 4977296

File tree

3 files changed

+88
-74
lines changed

3 files changed

+88
-74
lines changed

‎docs/framework/angular/overview.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ Most core web frameworks **do not** come with an opinionated way of fetching or
2323

2424
While most traditional state management libraries are great for working with client state, they are **not so great at working with async or server state**. This is because **server state is totally different**. For starters, server state:
2525

26-
- Is persisted remotely in a location you do not control or own
26+
- Is persisted remotely in a location you may not control or own
2727
- Requires asynchronous APIs for fetching and updating
2828
- Implies shared ownership and can be changed by other people without your knowledge
2929
- Can potentially become "out of date" in your applications if you're not careful
@@ -58,7 +58,7 @@ On a more technical note, Angular Query will likely:
5858

5959
In the example below, you can see Angular Query in its most basic and simple form being used to fetch the GitHub stats for the TanStack Query GitHub project itself:
6060

61-
[Open in CodeSandbox](https://codesandbox.io/s/github/tanstack/query/tree/main/examples/angular/simple)
61+
[Open in StackBlitz](https://stackblitz.com/github/TanStack/query/tree/main/examples/angular/simple)
6262

6363
```angular-ts
6464
import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental'
@@ -114,4 +114,4 @@ type Response = {
114114

115115
## You talked me into it, so what now?
116116

117-
- Learn Angular Query at your own pace with our amazingly thorough [Walkthrough Guide](../installation) and [API Reference](../reference/injectQuery)
117+
- Learn Angular Query at your own pace with our amazingly thorough [Walkthrough Guide](../installation) and [API Reference](../reference/functions/injectquery)

‎examples/angular/router/src/app/components/post.component.ts

+1-5
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,7 @@ import {
66
numberAttribute,
77
} from '@angular/core'
88
import { RouterLink } from '@angular/router'
9-
import {
10-
injectQuery,
11-
injectQueryClient,
12-
} from '@tanstack/angular-query-experimental'
9+
import { injectQuery } from '@tanstack/angular-query-experimental'
1310
import { lastValueFrom } from 'rxjs'
1411
import { PostsService } from '../services/posts-service'
1512

@@ -22,7 +19,6 @@ import { PostsService } from '../services/posts-service'
2219
})
2320
export default class PostComponent {
2421
#postsService = inject(PostsService)
25-
queryClient = injectQueryClient()
2622

2723
postId = input.required({
2824
transform: numberAttribute,

‎packages/angular-query-experimental/README.md

+84-66
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
# Angular Query
99

10-
> 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.
10+
> 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.
1111
1212
Functions for fetching, caching and updating asynchronous data in Angular
1313

@@ -29,87 +29,105 @@ Visit https://tanstack.com/query/latest/docs/framework/angular/overview
2929

3030
# Quick Start
3131

32-
> Angular Query requires Angular 16.
32+
> Angular Query requires Angular 16 or higher.
3333
3434
1. Install `angular-query`
3535

36-
```bash
37-
$ npm i @tanstack/angular-query-experimental
38-
```
36+
```bash
37+
$ npm i @tanstack/angular-query-experimental
38+
```
3939

40-
or
40+
or
4141

42-
```bash
43-
$ pnpm add @tanstack/angular-query-experimental
44-
```
42+
```bash
43+
$ pnpm add @tanstack/angular-query-experimental
44+
```
4545

46-
or
46+
or
4747

48-
```bash
49-
$ yarn add @tanstack/angular-query-experimental
50-
```
48+
```bash
49+
$ yarn add @tanstack/angular-query-experimental
50+
```
5151

52-
or
52+
or
5353

54-
```bash
55-
$ bun add @tanstack/angular-query-experimental
56-
```
54+
```bash
55+
$ bun add @tanstack/angular-query-experimental
56+
```
5757

5858
2. Initialize **Angular Query** by adding **provideAngularQuery** to your application
5959

60-
```ts
61-
import { provideAngularQuery } from '@tanstack/angular-query-experimental'
62-
import { QueryClient } from '@tanstack/angular-query-experimental'
60+
```ts
61+
import { provideAngularQuery } from '@tanstack/angular-query-experimental'
62+
import { QueryClient } from '@tanstack/angular-query-experimental'
6363

64-
bootstrapApplication(AppComponent, {
65-
providers: [provideAngularQuery(new QueryClient())],
66-
})
67-
```
64+
bootstrapApplication(AppComponent, {
65+
providers: [provideAngularQuery(new QueryClient())],
66+
})
67+
```
6868

69-
or in a NgModule-based app
69+
or in a NgModule-based app
7070

71-
```ts
72-
import { provideHttpClient } from '@angular/common/http'
73-
import {
74-
provideAngularQuery,
75-
QueryClient,
76-
} from '@tanstack/angular-query-experimental'
71+
```ts
72+
import { provideHttpClient } from '@angular/common/http'
73+
import {
74+
provideAngularQuery,
75+
QueryClient,
76+
} from '@tanstack/angular-query-experimental'
7777

78-
@NgModule({
79-
declarations: [AppComponent],
80-
imports: [BrowserModule],
81-
providers: [provideAngularQuery(new QueryClient())],
82-
bootstrap: [AppComponent],
83-
})
84-
```
78+
@NgModule({
79+
declarations: [AppComponent],
80+
imports: [BrowserModule],
81+
providers: [provideAngularQuery(new QueryClient())],
82+
bootstrap: [AppComponent],
83+
})
84+
```
8585

8686
3. Inject query
8787

88-
```ts
89-
import { injectQuery } from '@tanstack/angular-query-experimental'
90-
import { Component } from '@angular/core'
91-
92-
@Component({...})
93-
export class TodosComponent {
94-
info = injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodoList }))
95-
}
96-
```
97-
98-
4. If you need to update options on your query dynamically, make sure to pass them as signals
99-
100-
```ts
101-
import { injectQuery } from '@tanstack/angular-query-experimental'
102-
import { signal, Component } from '@angular/core'
103-
104-
@Component({...})
105-
export class TodosComponent {
106-
id = signal(1)
107-
enabled = signal(false)
108-
109-
info = injectQuery(() => ({
110-
queryKey: ['todos', this.id()],
111-
queryFn: fetchTodoList,
112-
enabled: this.enabled(),
113-
}))
114-
}
115-
```
88+
```ts
89+
import { injectQuery } from '@tanstack/angular-query-experimental'
90+
import { Component } from '@angular/core'
91+
92+
@Component({...})
93+
export class TodosComponent {
94+
info = injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodoList }))
95+
}
96+
```
97+
98+
4. 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.
99+
100+
[Open in StackBlitz](https://stackblitz.com/github/TanStack/query/tree/main/examples/angular/router)
101+
102+
```ts
103+
@Component({})
104+
export class PostComponent {
105+
#postsService = inject(PostsService)
106+
postId = input.required({
107+
transform: numberAttribute,
108+
})
109+
110+
postQuery = injectQuery(() => ({
111+
queryKey: ['post', this.postId()],
112+
queryFn: () => {
113+
return lastValueFrom(this.#postsService.postById$(this.postId()))
114+
},
115+
}))
116+
}
117+
118+
@Injectable({
119+
providedIn: 'root',
120+
})
121+
export class PostsService {
122+
#http = inject(HttpClient)
123+
124+
postById$ = (postId: number) =>
125+
this.#http.get<Post>(`https://jsonplaceholder.typicode.com/posts/${postId}`)
126+
}
127+
128+
export interface Post {
129+
id: number
130+
title: string
131+
body: string
132+
}
133+
```

0 commit comments

Comments
 (0)