>(() => ({
- queryKey: ['/posts'],
- }))
-
- queryClient = injectQueryClient()
-}
-
-@Component({
- changeDetection: ChangeDetectionStrategy.OnPush,
- selector: 'default-query-function-example',
- standalone: true,
- template: `
-
- As you visit the posts below, you will notice them in a loading state the
- first time you load them. However, after you return to this list and click
- on any posts you have already visited again, you will see them load
- instantly and background refresh right before your eyes!
-
- (You may need to throttle your network speed to simulate longer loading
- sequences)
-
-
-
-
-
-
-
- `,
- imports: [AngularQueryDevtools, NgIf, PostComponent, PostsComponent],
-})
-export class DefaultQueryFunctionExampleComponent {
- postId = signal(-1)
-}
diff --git a/examples/angular/default-query-function/src/index.ts b/examples/angular/default-query-function/src/index.ts
deleted file mode 100644
index b5bf027c4c..0000000000
--- a/examples/angular/default-query-function/src/index.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import '@angular/compiler'
-import 'zone.js'
-import { bootstrapApplication } from '@angular/platform-browser'
-import { provideAngularQuery } from '@tanstack/angular-query-experimental'
-import { QueryClient } from '@tanstack/angular-query-experimental'
-import axios from 'axios'
-import { DefaultQueryFunctionExampleComponent } from './default-query-function-example.component'
-import type { QueryFunction } from '@tanstack/angular-query-experimental'
-
-// Define a default query function that will receive the query key
-const defaultQueryFn: QueryFunction = async ({ queryKey }) => {
- const { data } = await axios.get(
- `https://jsonplaceholder.typicode.com${queryKey[0]}`,
- )
- return data
-}
-
-bootstrapApplication(DefaultQueryFunctionExampleComponent, {
- providers: [
- provideAngularQuery(
- new QueryClient({
- defaultOptions: {
- queries: {
- queryFn: defaultQueryFn,
- },
- },
- }),
- ),
- ],
-})
diff --git a/examples/angular/default-query-function/tsconfig.json b/examples/angular/default-query-function/tsconfig.json
deleted file mode 100644
index c3f5c82ab6..0000000000
--- a/examples/angular/default-query-function/tsconfig.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
- "compilerOptions": {
- "target": "ES2022",
- "useDefineForClassFields": true,
- "module": "ESNext",
- "lib": ["ESNext", "DOM"],
- "moduleResolution": "Bundler",
- "strict": true,
- "resolveJsonModule": true,
- "isolatedModules": true,
- "esModuleInterop": true,
- "noEmit": true,
- "noUnusedLocals": true,
- "noUnusedParameters": true,
- "noImplicitReturns": true,
- "skipLibCheck": true,
- "types": ["vite/client"],
- "experimentalDecorators": true
- },
- "angularCompilerOptions": {
- "enableI18nLegacyMessageIdFormat": false,
- "strictInjectionParameters": true,
- "strictInputAccessModifiers": true,
- "strictTemplates": true
- },
- "include": ["src", ".eslintrc.cjs"]
-}
diff --git a/examples/angular/infinite-query-with-max-pages/src/app/components/example.component.ts b/examples/angular/infinite-query-with-max-pages/src/app/components/example.component.ts
index c831c9ef73..509961ef80 100644
--- a/examples/angular/infinite-query-with-max-pages/src/app/components/example.component.ts
+++ b/examples/angular/infinite-query-with-max-pages/src/app/components/example.component.ts
@@ -22,7 +22,7 @@ export class ExampleComponent {
query = injectInfiniteQuery(() => ({
queryKey: ['projects'],
- queryFn: async ({ pageParam }) => {
+ queryFn: ({ pageParam }) => {
return lastValueFrom(this.projectsService.getProjects(pageParam))
},
initialPageParam: 0,
diff --git a/examples/angular/router/angular.json b/examples/angular/router/angular.json
index 5b5a4d61a2..1b5cd74c2c 100644
--- a/examples/angular/router/angular.json
+++ b/examples/angular/router/angular.json
@@ -2,7 +2,8 @@
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"cli": {
- "packageManager": "pnpm"
+ "packageManager": "pnpm",
+ "analytics": false
},
"newProjectRoot": "projects",
"projects": {
diff --git a/examples/angular/router/src/app/components/post.component.ts b/examples/angular/router/src/app/components/post.component.ts
index bfa9a3ea04..6d60a170bc 100644
--- a/examples/angular/router/src/app/components/post.component.ts
+++ b/examples/angular/router/src/app/components/post.component.ts
@@ -1,10 +1,9 @@
import {
ChangeDetectionStrategy,
Component,
- EventEmitter,
- Output,
inject,
input,
+ numberAttribute,
} from '@angular/core'
import { RouterLink } from '@angular/router'
import {
@@ -23,15 +22,16 @@ import { PostsService } from '../services/posts-service'
})
export default class PostComponent {
#postsService = inject(PostsService)
+ queryClient = injectQueryClient()
- postId = input(0, {
- transform: (value: string) => Number(value),
+ postId = input(0, {
+ transform: numberAttribute,
})
postQuery = injectQuery(() => ({
enabled: this.postId() > 0,
queryKey: ['post', this.postId()],
- queryFn: async () => {
+ queryFn: () => {
return lastValueFrom(this.#postsService.postById$(this.postId()))
},
}))
diff --git a/examples/angular/simple/README.md b/examples/angular/simple/README.md
index 4ca7ebd60c..cddff73343 100644
--- a/examples/angular/simple/README.md
+++ b/examples/angular/simple/README.md
@@ -1,4 +1,4 @@
-# Simple example
+# Angular Query simple example
To run this example:
diff --git a/examples/angular/simple/angular.json b/examples/angular/simple/angular.json
index 5c526b7ef7..8c600c0813 100644
--- a/examples/angular/simple/angular.json
+++ b/examples/angular/simple/angular.json
@@ -2,7 +2,8 @@
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"cli": {
- "packageManager": "pnpm"
+ "packageManager": "pnpm",
+ "analytics": false
},
"newProjectRoot": "projects",
"projects": {
diff --git a/examples/angular/simple/package.json b/examples/angular/simple/package.json
index 546fb03d41..fbd1a48fcc 100644
--- a/examples/angular/simple/package.json
+++ b/examples/angular/simple/package.json
@@ -1,6 +1,6 @@
{
- "name": "simple",
- "version": "0.0.0",
+ "name": "@tanstack/query-example-angular-simple",
+ "type": "module",
"scripts": {
"ng": "ng",
"start": "ng serve",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6c6b834040..0d23a3f537 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -174,43 +174,6 @@ importers:
specifier: 5.2.2
version: 5.2.2
- examples/angular/default-query-function:
- dependencies:
- '@angular/common':
- specifier: ^17.1.3
- version: 17.1.3(@angular/core@17.1.3)(rxjs@7.8.1)
- '@angular/compiler':
- specifier: ^17.1.3
- version: 17.1.3(@angular/core@17.1.3)
- '@angular/core':
- specifier: ^17.1.3
- version: 17.1.3(rxjs@7.8.1)(zone.js@0.14.3)
- '@angular/platform-browser':
- specifier: ^17.1.3
- version: 17.1.3(@angular/animations@17.1.3)(@angular/common@17.1.3)(@angular/core@17.1.3)
- '@tanstack/angular-query-devtools-experimental':
- specifier: ^5.20.2
- version: link:../../../packages/angular-query-devtools-experimental
- '@tanstack/angular-query-experimental':
- specifier: ^5.20.2
- version: link:../../../packages/angular-query-experimental
- axios:
- specifier: ^1.6.7
- version: 1.6.7
- rxjs:
- specifier: ^7.8.1
- version: 7.8.1
- zone.js:
- specifier: ^0.14.3
- version: 0.14.3
- devDependencies:
- typescript:
- specifier: 5.2.2
- version: 5.2.2
- vite:
- specifier: ^5.1.1
- version: 5.1.1(@types/node@18.19.3)
-
examples/angular/infinite-query-with-max-pages:
dependencies:
'@angular/animations':