Skip to content

Commit 68ca717

Browse files
arnoud-dvarnoud-dv
authored
docs(angular-query): add rxjs example (#8108)
1 parent 8727d97 commit 68ca717

24 files changed

+509
-28
lines changed

‎docs/config.json

+4
Original file line numberDiff line numberDiff line change
@@ -1045,6 +1045,10 @@
10451045
{
10461046
"label": "Angular Router",
10471047
"to": "framework/angular/examples/router"
1048+
},
1049+
{
1050+
"label": "RxJS autocomplete",
1051+
"to": "framework/angular/examples/rxjs"
10481052
}
10491053
]
10501054
}

‎examples/angular/basic/src/app/components/post.component.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
<div>
33
<a (click)="setPostId.emit(-1)" href="#"> Back </a>
44
</div>
5-
@if (postQuery.status() === 'pending') {
5+
@if (postQuery.isPending()) {
66
Loading...
7-
} @else if (postQuery.status() === 'error') {
8-
Error: {{ postQuery.error()?.message }}
7+
} @else if (postQuery.isError()) {
8+
Error: {{ postQuery.error().message }}
99
}
1010
@if (postQuery.data(); as post) {
1111
<h1>{{ post.title }}</h1>

‎examples/angular/basic/src/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<title>Angular Query basic example</title>
5+
<title>TanStack Query Angular basic example</title>
66
<base href="/" />
77
<meta name="viewport" content="width=device-width, initial-scale=1" />
88
<link rel="icon" type="image/x-icon" href="favicon.ico" />

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
<div>
33
<a routerLink="/" href="#">Back</a>
44
</div>
5-
@if (postQuery.status() === 'pending') {
5+
@if (postQuery.isPending()) {
66
Loading...
7-
} @else if (postQuery.status() === 'error') {
8-
Error: {{ postQuery.error()?.message }}
7+
} @else if (postQuery.isError()) {
8+
Error: {{ postQuery.error().message }}
99
}
1010
@if (postQuery.data(); as post) {
1111
<h1>{{ post.title }}</h1>

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

+3
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@ import { PostsService } from '../services/posts-service'
2020
export default class PostComponent {
2121
#postsService = inject(PostsService)
2222

23+
// The Angular router will automatically bind postId
24+
// as `withComponentInputBinding` is added to `provideRouter`.
25+
// See https://angular.dev/api/router/withComponentInputBinding
2326
postId = input.required({
2427
transform: numberAttribute,
2528
})

‎examples/angular/router/src/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<title>Angular Query router example</title>
5+
<title>TanStack Query Angular router example</title>
66
<base href="/" />
77
<meta name="viewport" content="width=device-width, initial-scale=1" />
88
<link rel="icon" type="image/x-icon" href="favicon.ico" />

‎examples/angular/rxjs/.devcontainer/devcontainer.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"name": "Node.js",
3+
"image": "mcr.microsoft.com/devcontainers/javascript-node:18"
4+
}

‎examples/angular/rxjs/.eslintrc.cjs

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// @ts-check
2+
3+
/** @type {import('eslint').Linter.Config} */
4+
const config = {}
5+
6+
module.exports = config

‎examples/angular/rxjs/README.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# TanStack Query Angular RxJS Example
2+
3+
To run this example:
4+
5+
- `npm install` or `yarn` or `pnpm i` or `bun i`
6+
- `npm run start` or `yarn start` or `pnpm start` or `bun start`

‎examples/angular/rxjs/angular.json

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"cli": {
5+
"packageManager": "pnpm",
6+
"analytics": false,
7+
"cache": {
8+
"enabled": false
9+
}
10+
},
11+
"newProjectRoot": "projects",
12+
"projects": {
13+
"basic": {
14+
"projectType": "application",
15+
"schematics": {
16+
"@schematics/angular:component": {
17+
"inlineTemplate": true,
18+
"inlineStyle": true,
19+
"skipTests": true
20+
},
21+
"@schematics/angular:class": {
22+
"skipTests": true
23+
},
24+
"@schematics/angular:directive": {
25+
"skipTests": true
26+
},
27+
"@schematics/angular:guard": {
28+
"skipTests": true
29+
},
30+
"@schematics/angular:interceptor": {
31+
"skipTests": true
32+
},
33+
"@schematics/angular:pipe": {
34+
"skipTests": true
35+
},
36+
"@schematics/angular:resolver": {
37+
"skipTests": true
38+
},
39+
"@schematics/angular:service": {
40+
"skipTests": true
41+
}
42+
},
43+
"root": "",
44+
"sourceRoot": "src",
45+
"prefix": "app",
46+
"architect": {
47+
"build": {
48+
"builder": "@angular-devkit/build-angular:application",
49+
"options": {
50+
"outputPath": "dist/basic",
51+
"index": "src/index.html",
52+
"browser": "src/main.ts",
53+
"polyfills": ["zone.js"],
54+
"tsConfig": "tsconfig.app.json",
55+
"assets": ["src/favicon.ico", "src/mockServiceWorker.js"],
56+
"styles": [],
57+
"scripts": []
58+
},
59+
"configurations": {
60+
"production": {
61+
"budgets": [
62+
{
63+
"type": "initial",
64+
"maximumWarning": "500kb",
65+
"maximumError": "1mb"
66+
},
67+
{
68+
"type": "anyComponentStyle",
69+
"maximumWarning": "2kb",
70+
"maximumError": "4kb"
71+
}
72+
],
73+
"outputHashing": "all"
74+
},
75+
"development": {
76+
"optimization": false,
77+
"extractLicenses": false,
78+
"sourceMap": true
79+
}
80+
},
81+
"defaultConfiguration": "production"
82+
},
83+
"serve": {
84+
"builder": "@angular-devkit/build-angular:dev-server",
85+
"configurations": {
86+
"production": {
87+
"buildTarget": "basic:build:production"
88+
},
89+
"development": {
90+
"buildTarget": "basic:build:development"
91+
}
92+
},
93+
"defaultConfiguration": "development"
94+
},
95+
"extract-i18n": {
96+
"builder": "@angular-devkit/build-angular:extract-i18n",
97+
"options": {
98+
"buildTarget": "basic:build"
99+
}
100+
}
101+
}
102+
}
103+
}
104+
}

‎examples/angular/rxjs/package.json

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "@tanstack/query-example-angular-rxjs",
3+
"private": true,
4+
"type": "module",
5+
"scripts": {
6+
"ng": "ng",
7+
"start": "ng serve",
8+
"build": "ng build",
9+
"watch": "ng build --watch --configuration development"
10+
},
11+
"dependencies": {
12+
"@angular/cdk": "17.3.10",
13+
"@angular/common": "^17.3.12",
14+
"@angular/compiler": "^17.3.12",
15+
"@angular/core": "^17.3.12",
16+
"@angular/forms": "17.3.12",
17+
"@angular/platform-browser": "^17.3.12",
18+
"@angular/platform-browser-dynamic": "^17.3.12",
19+
"@tanstack/angular-query-experimental": "^5.56.2",
20+
"rxjs": "^7.8.1",
21+
"tslib": "^2.6.3",
22+
"zone.js": "^0.14.8"
23+
},
24+
"devDependencies": {
25+
"@angular-devkit/build-angular": "^17.3.8",
26+
"@angular/cli": "^17.3.8",
27+
"@angular/compiler-cli": "^17.3.12",
28+
"@tanstack/angular-query-devtools-experimental": "^5.58.0",
29+
"typescript": "5.3.3"
30+
}
31+
}

‎examples/angular/rxjs/src/app/api/autocomplete-mock.interceptor.ts

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { HttpResponse } from '@angular/common/http'
2+
import { delayWhen, of, timer } from 'rxjs'
3+
import type { Observable } from 'rxjs'
4+
import type { HttpEvent, HttpInterceptorFn } from '@angular/common/http'
5+
6+
export const autocompleteMockInterceptor: HttpInterceptorFn = (
7+
req,
8+
next,
9+
): Observable<HttpEvent<any>> => {
10+
const { url } = req
11+
12+
if (url.includes('/api/autocomplete')) {
13+
const term = new URLSearchParams(req.url.split('?')[1]).get('term') || ''
14+
15+
const data = [
16+
'C#',
17+
'C++',
18+
'Go',
19+
'Java',
20+
'JavaScript',
21+
'Kotlin',
22+
'Lisp',
23+
'Objective-C',
24+
'PHP',
25+
'Perl',
26+
'Python',
27+
'R',
28+
'Ruby',
29+
'Rust',
30+
'SQL',
31+
'Scala',
32+
'Shell',
33+
'Swift',
34+
'TypeScript',
35+
]
36+
37+
// Simulate network latency with a random delay between 100ms and 500ms
38+
const delayDuration = Math.random() * (500 - 100) + 100
39+
return of(
40+
new HttpResponse({
41+
status: 200,
42+
body: {
43+
suggestions: data.filter((item) =>
44+
item.toLowerCase().startsWith(term.toLowerCase()),
45+
),
46+
},
47+
}),
48+
).pipe(delayWhen(() => timer(delayDuration)))
49+
}
50+
return next(req)
51+
}

‎examples/angular/rxjs/src/app/app.component.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core'
2+
import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental'
3+
import { ExampleComponent } from './components/example.component'
4+
5+
@Component({
6+
changeDetection: ChangeDetectionStrategy.OnPush,
7+
selector: 'app-root',
8+
standalone: true,
9+
template: `<example /><angular-query-devtools initialIsOpen />`,
10+
imports: [AngularQueryDevtools, ExampleComponent],
11+
})
12+
export class AppComponent {}

‎examples/angular/rxjs/src/app/app.config.ts

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import {
2+
provideHttpClient,
3+
withFetch,
4+
withInterceptors,
5+
} from '@angular/common/http'
6+
import {
7+
QueryClient,
8+
provideAngularQuery,
9+
} from '@tanstack/angular-query-experimental'
10+
import { autocompleteMockInterceptor } from './api/autocomplete-mock.interceptor'
11+
import type { ApplicationConfig } from '@angular/core'
12+
13+
export const appConfig: ApplicationConfig = {
14+
providers: [
15+
provideAngularQuery(
16+
new QueryClient({
17+
defaultOptions: {
18+
queries: {
19+
gcTime: 1000 * 60 * 60 * 24, // 24 hours
20+
},
21+
},
22+
}),
23+
),
24+
provideHttpClient(
25+
withFetch(),
26+
withInterceptors([autocompleteMockInterceptor]),
27+
),
28+
],
29+
}

‎examples/angular/rxjs/src/app/components/example.component.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<h1>Search for a programming language</h1>
2+
3+
<form [formGroup]="form">
4+
<input type="text" formControlName="term" />
5+
6+
@if (query.isSuccess() && query.data().suggestions.length) {
7+
<ul>
8+
@for (suggestion of query.data().suggestions; track suggestion) {
9+
<li>{{ suggestion }}</li>
10+
}
11+
</ul>
12+
}
13+
</form>

‎examples/angular/rxjs/src/app/components/example.component.ts

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
2+
import { toSignal } from '@angular/core/rxjs-interop'
3+
import { NonNullableFormBuilder, ReactiveFormsModule } from '@angular/forms'
4+
import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental'
5+
import {
6+
injectQuery,
7+
keepPreviousData,
8+
} from '@tanstack/angular-query-experimental'
9+
import { debounceTime, distinctUntilChanged, lastValueFrom } from 'rxjs'
10+
import { AutocompleteService } from '../services/autocomplete-service'
11+
12+
@Component({
13+
changeDetection: ChangeDetectionStrategy.OnPush,
14+
selector: 'example',
15+
standalone: true,
16+
templateUrl: './example.component.html',
17+
imports: [AngularQueryDevtools, ReactiveFormsModule],
18+
})
19+
export class ExampleComponent {
20+
#autocompleteService = inject(AutocompleteService)
21+
#fb = inject(NonNullableFormBuilder)
22+
23+
form = this.#fb.group({
24+
term: '',
25+
})
26+
27+
term = toSignal(
28+
this.form.controls.term.valueChanges.pipe(
29+
debounceTime(300),
30+
distinctUntilChanged(),
31+
),
32+
{ initialValue: '' },
33+
)
34+
35+
query = injectQuery(() => ({
36+
queryKey: ['suggestions', this.term()],
37+
queryFn: () => {
38+
return lastValueFrom(
39+
this.#autocompleteService.getSuggestions(this.term()),
40+
)
41+
},
42+
placeholderData: keepPreviousData,
43+
staleTime: 1000 * 60 * 5, // 5 minutes
44+
}))
45+
}

‎examples/angular/rxjs/src/app/services/autocomplete-service.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { HttpClient } from '@angular/common/http'
2+
import { Injectable, inject } from '@angular/core'
3+
import { of } from 'rxjs'
4+
5+
interface Response {
6+
suggestions: Array<string>
7+
}
8+
9+
@Injectable({
10+
providedIn: 'root',
11+
})
12+
export class AutocompleteService {
13+
#http = inject(HttpClient)
14+
getSuggestions = (term: string) =>
15+
term.trim() === ''
16+
? of({ suggestions: [] })
17+
: this.#http.get<Response>(`/api/autocomplete?term=${term}`)
18+
}

‎examples/angular/rxjs/src/favicon.ico

14.7 KB
Binary file not shown.

0 commit comments

Comments
 (0)