Skip to content

Commit c61ff1e

Browse files
arnoud-dvarnoud-dv
authoredOct 25, 2024··
docs(angular-query): add query options from a service example (#8220)
·
v5.73.1v5.59.17
1 parent 1865f0d commit c61ff1e

25 files changed

+477
-16
lines changed
 

‎docs/config.json

+4
Original file line numberDiff line numberDiff line change
@@ -1053,6 +1053,10 @@
10531053
{
10541054
"label": "RxJS autocomplete",
10551055
"to": "framework/angular/examples/rxjs"
1056+
},
1057+
{
1058+
"label": "Query options from a service",
1059+
"to": "framework/angular/examples/query-options-from-a-service"
10561060
}
10571061
]
10581062
}

‎examples/angular/query-options-from-a-service/.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/query-options-from-a-service/.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/query-options-from-a-service/README.md

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

‎examples/angular/query-options-from-a-service/package.json

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "@tanstack/query-example-angular-query-options-from-a-service",
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": "^17.3.12",
13+
"@angular/compiler": "^17.3.12",
14+
"@angular/core": "^17.3.12",
15+
"@angular/platform-browser": "^17.3.12",
16+
"@angular/platform-browser-dynamic": "^17.3.12",
17+
"@angular/router": "^17.3.12",
18+
"@tanstack/angular-query-experimental": "^5.59.16",
19+
"rxjs": "^7.8.1",
20+
"tslib": "^2.6.3",
21+
"zone.js": "^0.14.8"
22+
},
23+
"devDependencies": {
24+
"@angular-devkit/build-angular": "^17.3.8",
25+
"@angular/cli": "^17.3.8",
26+
"@angular/compiler-cli": "^17.3.12",
27+
"@tanstack/angular-query-devtools-experimental": "^5.59.16",
28+
"typescript": "5.3.3"
29+
}
30+
}

‎examples/angular/query-options-from-a-service/src/app/app.component.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<p>
2+
As you visit the posts below, you will notice them in a loading state the
3+
first time you load them. However, after you return to this list and click on
4+
any posts you have already visited again, you will see them load instantly and
5+
background refresh right before your eyes!
6+
<strong>
7+
(You may need to throttle your network speed to simulate longer loading
8+
sequences)
9+
</strong>
10+
</p>
11+
<angular-query-devtools initialIsOpen />
12+
<router-outlet />

‎examples/angular/query-options-from-a-service/src/app/app.component.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Component } from '@angular/core'
2+
import { RouterOutlet } from '@angular/router'
3+
import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental'
4+
5+
@Component({
6+
selector: 'app-root',
7+
standalone: true,
8+
imports: [AngularQueryDevtools, RouterOutlet],
9+
templateUrl: './app.component.html',
10+
styles: [],
11+
})
12+
export class AppComponent {}

‎examples/angular/query-options-from-a-service/src/app/app.config.ts

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { provideHttpClient, withFetch } from '@angular/common/http'
2+
import { provideRouter, withComponentInputBinding } from '@angular/router'
3+
import {
4+
QueryClient,
5+
provideAngularQuery,
6+
} from '@tanstack/angular-query-experimental'
7+
8+
import { routes } from './app.routes'
9+
import type { ApplicationConfig } from '@angular/core'
10+
11+
export const appConfig: ApplicationConfig = {
12+
providers: [
13+
provideAngularQuery(new QueryClient()),
14+
provideHttpClient(withFetch()),
15+
provideRouter(routes, withComponentInputBinding()),
16+
],
17+
}

‎examples/angular/query-options-from-a-service/src/app/app.routes.ts

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import type { Route } from '@angular/router'
2+
3+
// loadComponent lazily loads the component
4+
// when the component is the default export, there is no need to handle the promise
5+
6+
export const routes: Array<Route> = [
7+
{
8+
path: '',
9+
loadComponent: () => import('./components/posts.component'),
10+
},
11+
{
12+
path: 'post/:postId',
13+
loadComponent: () => import('./components/post.component'),
14+
},
15+
]

‎examples/angular/query-options-from-a-service/src/app/components/post.component.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<div>
2+
<div>
3+
<a routerLink="/" href="#">Back</a>
4+
</div>
5+
@if (postQuery.isPending()) {
6+
Loading...
7+
} @else if (postQuery.isError()) {
8+
Error: {{ postQuery.error().message }}
9+
}
10+
@if (postQuery.data(); as post) {
11+
<h1>{{ post.title }}</h1>
12+
<div>
13+
<p>{{ post.body }}</p>
14+
</div>
15+
@if (postQuery.isFetching()) {
16+
Background Updating...
17+
}
18+
}
19+
</div>

‎examples/angular/query-options-from-a-service/src/app/components/post.component.ts

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import {
2+
ChangeDetectionStrategy,
3+
Component,
4+
inject,
5+
input,
6+
numberAttribute,
7+
} from '@angular/core'
8+
import { RouterLink } from '@angular/router'
9+
import { injectQuery } from '@tanstack/angular-query-experimental'
10+
import { QueriesService } from '../services/queries-service'
11+
12+
@Component({
13+
changeDetection: ChangeDetectionStrategy.OnPush,
14+
selector: 'post',
15+
standalone: true,
16+
templateUrl: './post.component.html',
17+
imports: [RouterLink],
18+
})
19+
export default class PostComponent {
20+
private queries = inject(QueriesService)
21+
22+
postId = input.required({
23+
transform: numberAttribute,
24+
})
25+
26+
postQuery = injectQuery(() => this.queries.post(this.postId()))
27+
}

‎examples/angular/query-options-from-a-service/src/app/components/posts.component.html

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<div>
2+
<h1>Posts</h1>
3+
@switch (postsQuery.status()) {
4+
@case ('pending') {
5+
Loading...
6+
}
7+
@case ('error') {
8+
Error: {{ postsQuery.error()?.message }}
9+
}
10+
@default {
11+
<div class="todo-container">
12+
@for (post of postsQuery.data(); track post.id) {
13+
<p>
14+
<!-- We can access the query data here to show bold links for-->
15+
<!-- ones that are cached-->
16+
<a
17+
routerLink="post/{{ post.id }}"
18+
[style]="
19+
queryClient.getQueryData(['post', post.id])
20+
? {
21+
fontWeight: 'bold',
22+
color: 'green',
23+
}
24+
: {}
25+
"
26+
>{{ post.title }}</a
27+
>
28+
</p>
29+
}
30+
</div>
31+
}
32+
}
33+
<div>
34+
@if (postsQuery.isFetching()) {
35+
Background Updating...
36+
}
37+
</div>
38+
</div>

‎examples/angular/query-options-from-a-service/src/app/components/posts.component.ts

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
2+
import { RouterLink } from '@angular/router'
3+
import {
4+
injectQuery,
5+
injectQueryClient,
6+
} from '@tanstack/angular-query-experimental'
7+
import { QueriesService } from '../services/queries-service'
8+
9+
@Component({
10+
changeDetection: ChangeDetectionStrategy.OnPush,
11+
selector: 'posts',
12+
standalone: true,
13+
templateUrl: './posts.component.html',
14+
imports: [RouterLink],
15+
})
16+
export default class PostsComponent {
17+
private queries = inject(QueriesService)
18+
19+
postsQuery = injectQuery(() => this.queries.posts())
20+
queryClient = injectQueryClient()
21+
}

‎examples/angular/query-options-from-a-service/src/app/services/posts-service.ts

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { HttpClient } from '@angular/common/http'
2+
import { Injectable, inject } from '@angular/core'
3+
4+
@Injectable({
5+
providedIn: 'root',
6+
})
7+
export class PostsService {
8+
#http = inject(HttpClient)
9+
10+
postById$ = (postId: number) =>
11+
this.#http.get<Post>(`https://jsonplaceholder.typicode.com/posts/${postId}`)
12+
13+
allPosts$ = () =>
14+
this.#http.get<Array<Post>>('https://jsonplaceholder.typicode.com/posts')
15+
}
16+
17+
export interface Post {
18+
id: number
19+
title: string
20+
body: string
21+
}

‎examples/angular/query-options-from-a-service/src/app/services/queries-service.ts

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Injectable, inject } from '@angular/core'
2+
import { lastValueFrom } from 'rxjs'
3+
import { queryOptions } from '@tanstack/angular-query-experimental'
4+
import { PostsService } from './posts-service'
5+
6+
@Injectable({
7+
providedIn: 'root',
8+
})
9+
export class QueriesService {
10+
private postsService = inject(PostsService)
11+
12+
post(postId: number) {
13+
return queryOptions({
14+
queryKey: ['post', postId],
15+
queryFn: () => {
16+
return lastValueFrom(this.postsService.postById$(postId))
17+
},
18+
})
19+
}
20+
21+
posts() {
22+
return queryOptions({
23+
queryKey: ['posts'],
24+
queryFn: () => lastValueFrom(this.postsService.allPosts$()),
25+
})
26+
}
27+
}

‎examples/angular/query-options-from-a-service/src/assets/.gitkeep

Whitespace-only changes.

‎examples/angular/query-options-from-a-service/src/favicon.ico

14.7 KB
Binary file not shown.

‎examples/angular/query-options-from-a-service/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 query options from a service 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/query-options-from-a-service/src/main.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
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).catch((err) => console.error(err))

‎examples/angular/query-options-from-a-service/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/query-options-from-a-service/tsconfig.json

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
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+
"esModuleInterop": true,
13+
"sourceMap": true,
14+
"declaration": false,
15+
"experimentalDecorators": true,
16+
"moduleResolution": "node",
17+
"importHelpers": true,
18+
"target": "ES2022",
19+
"module": "ES2022",
20+
"useDefineForClassFields": false,
21+
"lib": ["ES2022", "dom"]
22+
},
23+
"angularCompilerOptions": {
24+
"enableI18nLegacyMessageIdFormat": false,
25+
"strictInjectionParameters": true,
26+
"strictInputAccessModifiers": true,
27+
"strictTemplates": true
28+
}
29+
}

‎examples/angular/router/angular.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
"polyfills": ["zone.js"],
5454
"tsConfig": "tsconfig.app.json",
5555
"assets": ["src/favicon.ico", "src/assets"],
56-
"styles": ["src/styles.css"],
56+
"styles": [],
5757
"scripts": []
5858
},
5959
"configurations": {

‎examples/angular/router/src/styles.css

-1
This file was deleted.

‎pnpm-lock.yaml

+57-14
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.