Skip to content

Commit d6621a8

Browse files
MatanShushanautofix-ci[bot]arnoud-dv
authored
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 <[email protected]> * Update examples/angular/auto-refetching/package.json Co-authored-by: Arnoud <[email protected]> * Update examples/angular/auto-refetching/src/index.html Co-authored-by: Arnoud <[email protected]> * Update examples/angular/auto-refetching/tsconfig.json Co-authored-by: Arnoud <[email protected]> * Update examples/angular/auto-refetching/tsconfig.json Co-authored-by: Arnoud <[email protected]> * Update examples/angular/auto-refetching/tsconfig.json Co-authored-by: Arnoud <[email protected]> * Update examples/angular/auto-refetching/src/app/app.config.ts Co-authored-by: Arnoud <[email protected]> * 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 <[email protected]>
1 parent 8ccc36c commit d6621a8

18 files changed

+489
-4
lines changed

‎docs/config.json‎

Lines changed: 4 additions & 0 deletions
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‎

Lines changed: 4 additions & 0 deletions
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‎

Lines changed: 6 additions & 0 deletions
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‎

Lines changed: 6 additions & 0 deletions
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‎

Lines changed: 104 additions & 0 deletions
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‎

Lines changed: 28 additions & 0 deletions
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‎

Lines changed: 11 additions & 0 deletions
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‎

Lines changed: 28 additions & 0 deletions
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‎

Lines changed: 35 additions & 0 deletions
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‎

Lines changed: 46 additions & 0 deletions
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+
}

0 commit comments

Comments
 (0)