Skip to content

Commit d6621a8

Browse files
MatanShushanautofix-ci[bot]arnoud-dv
authoredDec 4, 2024··
docs(angular-query): add auto-refetching example (#8371)
* feat(examples): add angular auto-refetching example Implement an example showcasing auto-refetching in Angular using TanStack Query. Includes a mock API interceptor to simulate HTTP calls for tasks. * feat(examples): add angular auto-refetching example Implement an example showcasing auto-refetching in Angular using TanStack Query. Includes a mock API interceptor to simulate HTTP calls for tasks. * feat(examples): update lock file * Update lock file * ci: apply automated fixes * Update examples/angular/auto-refetching/.devcontainer/devcontainer.json Co-authored-by: Arnoud <6420061+arnoud-dv@users.noreply.github.com> * Update examples/angular/auto-refetching/package.json Co-authored-by: Arnoud <6420061+arnoud-dv@users.noreply.github.com> * Update examples/angular/auto-refetching/src/index.html Co-authored-by: Arnoud <6420061+arnoud-dv@users.noreply.github.com> * Update examples/angular/auto-refetching/tsconfig.json Co-authored-by: Arnoud <6420061+arnoud-dv@users.noreply.github.com> * Update examples/angular/auto-refetching/tsconfig.json Co-authored-by: Arnoud <6420061+arnoud-dv@users.noreply.github.com> * Update examples/angular/auto-refetching/tsconfig.json Co-authored-by: Arnoud <6420061+arnoud-dv@users.noreply.github.com> * Update examples/angular/auto-refetching/src/app/app.config.ts Co-authored-by: Arnoud <6420061+arnoud-dv@users.noreply.github.com> * Update MR change interceptor to function interceptor and update all tasks to quert options obj * Update Angular version * Update Angular version * ci: apply automated fixes * Add fetching indicator * add example to docs * fix build --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Arnoud <6420061+arnoud-dv@users.noreply.github.com>
·
v5.69.1v5.62.3
1 parent 8ccc36c commit d6621a8

18 files changed

+489
-4
lines changed
 

‎docs/config.json

+4
Original file line numberDiff line numberDiff line change
@@ -1046,6 +1046,10 @@
10461046
"label": "Basic",
10471047
"to": "framework/angular/examples/basic"
10481048
},
1049+
{
1050+
"label": "Auto Refetching / Polling / Realtime",
1051+
"to": "framework/angular/examples/auto-refetching"
1052+
},
10491053
{
10501054
"label": "Pagination",
10511055
"to": "framework/angular/examples/pagination"

‎examples/angular/auto-refetching/.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:22"
4+
}

‎examples/angular/auto-refetching/.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/auto-refetching/README.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# TanStack Query Angular auto-refetching 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/auto-refetching/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+
"auto-refetching": {
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/build:application",
49+
"options": {
50+
"outputPath": "dist/auto-refetching",
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/assets"],
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/build:dev-server",
85+
"configurations": {
86+
"production": {
87+
"buildTarget": "auto-refetching:build:production"
88+
},
89+
"development": {
90+
"buildTarget": "auto-refetching:build:development"
91+
}
92+
},
93+
"defaultConfiguration": "development"
94+
},
95+
"extract-i18n": {
96+
"builder": "@angular/build:extract-i18n",
97+
"options": {
98+
"buildTarget": "auto-refetching:build"
99+
}
100+
}
101+
}
102+
}
103+
}
104+
}

‎examples/angular/auto-refetching/package.json

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "@tanstack/query-example-angular-auto-refetching",
3+
"type": "module",
4+
"scripts": {
5+
"ng": "ng",
6+
"start": "ng serve",
7+
"build": "ng build",
8+
"watch": "ng build --watch --configuration development"
9+
},
10+
"private": true,
11+
"dependencies": {
12+
"@angular/common": "^19.1.0-next.0",
13+
"@angular/compiler": "^19.1.0-next.0",
14+
"@angular/core": "^19.1.0-next.0",
15+
"@angular/platform-browser": "^19.1.0-next.0",
16+
"@angular/platform-browser-dynamic": "^19.1.0-next.0",
17+
"@tanstack/angular-query-experimental": "^5.62.2",
18+
"rxjs": "^7.8.1",
19+
"tslib": "^2.6.3",
20+
"zone.js": "^0.15.0"
21+
},
22+
"devDependencies": {
23+
"@angular/build": "^19.0.2",
24+
"@angular/cli": "^19.0.2",
25+
"@angular/compiler-cli": "^19.1.0-next.0",
26+
"typescript": "5.7.2"
27+
}
28+
}

‎examples/angular/auto-refetching/src/app/app.component.ts

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

‎examples/angular/auto-refetching/src/app/app.config.ts

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

‎examples/angular/auto-refetching/src/app/components/auto-refetching.component.html

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<div>
2+
<h1>Auto Refetch with stale-time set to {{ intervalMs() }}ms</h1>
3+
<p>
4+
This example is best experienced on your own machine, where you can open
5+
multiple tabs to the same localhost server and see your changes propagate
6+
between the two.
7+
</p>
8+
<label>
9+
Query Interval speed (ms):
10+
<input [value]="intervalMs()" (input)="inputChange($event)" />
11+
<span
12+
[ngStyle]="{
13+
display: 'inline-block',
14+
marginLeft: '.5rem',
15+
width: '10px',
16+
height: '10px',
17+
background: tasks.isFetching() ? 'green' : 'transparent',
18+
transition: !tasks.isFetching() ? 'all .3s ease' : 'none',
19+
borderRadius: '100%',
20+
transform: 'scale(2)',
21+
}"
22+
></span>
23+
</label>
24+
<h2>Todo List</h2>
25+
26+
<input placeholder="Enter something" (keydown.enter)="addItem($event)" />
27+
<ul>
28+
@for (item of tasks.data(); track item) {
29+
<li>{{ item }}</li>
30+
}
31+
</ul>
32+
<div>
33+
<button (click)="clearTasks()">Clear All</button>
34+
</div>
35+
</div>

‎examples/angular/auto-refetching/src/app/components/auto-refetching.component.ts

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import {
2+
ChangeDetectionStrategy,
3+
Component,
4+
inject,
5+
signal,
6+
} from '@angular/core'
7+
import {
8+
injectMutation,
9+
injectQuery,
10+
} from '@tanstack/angular-query-experimental'
11+
import { NgStyle } from '@angular/common'
12+
import { TasksService } from '../services/tasks.service'
13+
14+
@Component({
15+
changeDetection: ChangeDetectionStrategy.OnPush,
16+
selector: 'auto-refetching-example',
17+
standalone: true,
18+
templateUrl: './auto-refetching.component.html',
19+
imports: [NgStyle],
20+
})
21+
export class AutoRefetchingExampleComponent {
22+
#tasksService = inject(TasksService)
23+
24+
intervalMs = signal(1000)
25+
26+
tasks = injectQuery(() => this.#tasksService.allTasks(this.intervalMs()))
27+
28+
addMutation = injectMutation(() => this.#tasksService.addTask())
29+
clearMutation = injectMutation(() => this.#tasksService.clearAllTasks())
30+
31+
clearTasks() {
32+
this.clearMutation.mutate()
33+
}
34+
35+
inputChange($event: Event) {
36+
const target = $event.target as HTMLInputElement
37+
this.intervalMs.set(Number(target.value))
38+
}
39+
40+
addItem($event: Event) {
41+
const target = $event.target as HTMLInputElement
42+
const value = target.value
43+
this.addMutation.mutate(value)
44+
target.value = ''
45+
}
46+
}

‎examples/angular/auto-refetching/src/app/interceptor/mock-api.interceptor.ts

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/**
2+
* MockApiInterceptor is used to simulate API responses for `/api/tasks` endpoints.
3+
* It handles the following operations:
4+
* - GET: Fetches all tasks from localStorage.
5+
* - POST: Adds a new task to localStorage.
6+
* - DELETE: Clears all tasks from localStorage.
7+
* Simulated responses include a delay to mimic network latency.
8+
*/
9+
import { HttpResponse } from '@angular/common/http'
10+
import { delay, of } from 'rxjs'
11+
import type {
12+
HttpEvent,
13+
HttpHandlerFn,
14+
HttpInterceptorFn,
15+
HttpRequest,
16+
} from '@angular/common/http'
17+
import type { Observable } from 'rxjs'
18+
19+
export const mockInterceptor: HttpInterceptorFn = (
20+
req: HttpRequest<unknown>,
21+
next: HttpHandlerFn,
22+
): Observable<HttpEvent<any>> => {
23+
const respondWith = (status: number, body: any) =>
24+
of(new HttpResponse({ status, body })).pipe(delay(100))
25+
if (req.url === '/api/tasks') {
26+
switch (req.method) {
27+
case 'GET':
28+
return respondWith(
29+
200,
30+
JSON.parse(localStorage.getItem('tasks') || '[]'),
31+
)
32+
case 'POST':
33+
const tasks = JSON.parse(localStorage.getItem('tasks') || '[]')
34+
tasks.push(req.body)
35+
localStorage.setItem('tasks', JSON.stringify(tasks))
36+
return respondWith(201, {
37+
status: 'success',
38+
task: req.body,
39+
})
40+
case 'DELETE':
41+
localStorage.removeItem('tasks')
42+
return respondWith(200, { status: 'success' })
43+
}
44+
}
45+
return next(req)
46+
}

‎examples/angular/auto-refetching/src/app/services/tasks.service.ts

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { HttpClient } from '@angular/common/http'
2+
import { Injectable, inject } from '@angular/core'
3+
import {
4+
QueryClient,
5+
mutationOptions,
6+
queryOptions,
7+
} from '@tanstack/angular-query-experimental'
8+
9+
import { lastValueFrom } from 'rxjs'
10+
11+
@Injectable({
12+
providedIn: 'root',
13+
})
14+
export class TasksService {
15+
#queryClient = inject(QueryClient) // Manages query state and caching
16+
#http = inject(HttpClient) // Handles HTTP requests
17+
18+
/**
19+
* Fetches all tasks from the API.
20+
* Returns an observable containing an array of task strings.
21+
*/
22+
allTasks = (intervalMs: number) =>
23+
queryOptions({
24+
queryKey: ['tasks'],
25+
queryFn: () => {
26+
return lastValueFrom(this.#http.get<Array<string>>('/api/tasks'))
27+
},
28+
refetchInterval: intervalMs,
29+
})
30+
31+
/**
32+
* Creates a mutation for adding a task.
33+
* On success, invalidates and refetches the "tasks" query cache to update the task list.
34+
*/
35+
addTask() {
36+
return mutationOptions({
37+
mutationFn: (task: string) =>
38+
lastValueFrom(this.#http.post('/api/tasks', task)),
39+
mutationKey: ['tasks'],
40+
onSuccess: () => {
41+
this.#queryClient.invalidateQueries({ queryKey: ['tasks'] })
42+
},
43+
})
44+
}
45+
46+
/**
47+
* Creates a mutation for clearing all tasks.
48+
* On success, invalidates and refetches the "tasks" query cache to ensure consistency.
49+
*/
50+
clearAllTasks() {
51+
return mutationOptions({
52+
mutationFn: () => lastValueFrom(this.#http.delete('/api/tasks')),
53+
mutationKey: ['clearTasks'],
54+
onSuccess: () => {
55+
this.#queryClient.invalidateQueries({ queryKey: ['tasks'] })
56+
},
57+
})
58+
}
59+
}

‎examples/angular/auto-refetching/src/favicon.ico

14.7 KB
Binary file not shown.

‎examples/angular/auto-refetching/src/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>TanStack Query Angular auto-refetching example</title>
6+
<base href="/" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<link rel="icon" type="image/x-icon" href="favicon.ico" />
9+
</head>
10+
<body>
11+
<app-root></app-root>
12+
</body>
13+
</html>

‎examples/angular/auto-refetching/src/main.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { bootstrapApplication } from '@angular/platform-browser'
2+
import { appConfig } from './app/app.config'
3+
import { AppComponent } from './app/app.component'
4+
5+
bootstrapApplication(AppComponent, appConfig)
6+
.then(() => {
7+
// an simple endpoint for getting current list
8+
localStorage.setItem(
9+
'tasks',
10+
JSON.stringify(['Item 1', 'Item 2', 'Item 3']),
11+
)
12+
})
13+
.catch((err) => console.error(err))

‎examples/angular/auto-refetching/tsconfig.app.json

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"extends": "./tsconfig.json",
3+
"compilerOptions": {
4+
"outDir": "./out-tsc/app",
5+
"types": []
6+
},
7+
"files": ["src/main.ts"],
8+
"include": ["src/**/*.d.ts"]
9+
}

‎examples/angular/auto-refetching/tsconfig.json

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"compileOnSave": false,
3+
"compilerOptions": {
4+
"outDir": "./dist/out-tsc",
5+
"forceConsistentCasingInFileNames": true,
6+
"strict": true,
7+
"noImplicitOverride": true,
8+
"noPropertyAccessFromIndexSignature": true,
9+
"noImplicitReturns": true,
10+
"noFallthroughCasesInSwitch": true,
11+
"skipLibCheck": true,
12+
"isolatedModules": true,
13+
"esModuleInterop": true,
14+
"sourceMap": true,
15+
"declaration": false,
16+
"experimentalDecorators": true,
17+
"moduleResolution": "bundler",
18+
"importHelpers": true,
19+
"target": "ES2022",
20+
"module": "ES2022",
21+
"useDefineForClassFields": false,
22+
"lib": ["ES2022", "dom"]
23+
},
24+
"angularCompilerOptions": {
25+
"enableI18nLegacyMessageIdFormat": false,
26+
"strictInjectionParameters": true,
27+
"strictInputAccessModifiers": true,
28+
"strictStandalone": true,
29+
"strictTemplates": true
30+
}
31+
}

‎pnpm-lock.yaml

+46-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)
Please sign in to comment.