Schnellstart
WICHTIG: Diese Bibliothek befindet sich derzeit in einem experimentellen Stadium. Das bedeutet, dass es zu Breaking Changes in Minor- UND Patch-Releases kommen wird. Aktualisieren Sie vorsichtig. Wenn Sie dies während des experimentellen Stadiums in der Produktion verwenden, sperren Sie bitte Ihre Version auf eine Patch-Level-Version, um unerwartete Breaking Changes zu vermeiden.
Wenn Sie nach einem voll funktionsfähigen Beispiel suchen, werfen Sie bitte einen Blick auf unser grundlegendes Codesandbox-Beispiel
Client für Ihre App bereitstellen
ts
import { provideHttpClient } from '@angular/common/http'
import {
provideTanStackQuery,
QueryClient,
} from '@tanstack/angular-query-experimental'
bootstrapApplication(AppComponent, {
providers: [provideHttpClient(), provideTanStackQuery(new QueryClient())],
})
import { provideHttpClient } from '@angular/common/http'
import {
provideTanStackQuery,
QueryClient,
} from '@tanstack/angular-query-experimental'
bootstrapApplication(AppComponent, {
providers: [provideHttpClient(), provideTanStackQuery(new QueryClient())],
})
oder in einer NgModule-basierten App
ts
import { provideHttpClient } from '@angular/common/http'
import {
provideTanStackQuery,
QueryClient,
} from '@tanstack/angular-query-experimental'
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [provideTanStackQuery(new QueryClient())],
bootstrap: [AppComponent],
})
export class AppModule {}
import { provideHttpClient } from '@angular/common/http'
import {
provideTanStackQuery,
QueryClient,
} from '@tanstack/angular-query-experimental'
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [provideTanStackQuery(new QueryClient())],
bootstrap: [AppComponent],
})
export class AppModule {}
Komponente mit Query und Mutation
angular-ts
import { Component, Injectable, inject } from '@angular/core'
import { HttpClient } from '@angular/common/http'
import { lastValueFrom } from 'rxjs'
import {
injectMutation,
injectQuery,
QueryClient
} from '@tanstack/angular-query-experimental'
@Component({
standalone: true,
template: `
<div>
<button (click)="onAddTodo()">Add Todo</button>
<ul>
@for (todo of query.data(); track todo.title) {
<li>{{ todo.title }}</li>
}
</ul>
</div>
`,
})
export class TodosComponent {
todoService = inject(TodoService)
queryClient = inject(QueryClient)
query = injectQuery(() => ({
queryKey: ['todos'],
queryFn: () => this.todoService.getTodos(),
}))
mutation = injectMutation(() => ({
mutationFn: (todo: Todo) => this.todoService.addTodo(todo),
onSuccess: () => {
this.queryClient.invalidateQueries({ queryKey: ['todos'] })
},
}))
onAddTodo() {
this.mutation.mutate({
id: Date.now().toString(),
title: 'Do Laundry',
})
}
}
@Injectable({ providedIn: 'root' })
export class TodoService {
private http = inject(HttpClient)
getTodos(): Promise<Todo[]> {
return lastValueFrom(
this.http.get<Todo[]>('https://jsonplaceholder.typicode.com/todos'),
)
}
addTodo(todo: Todo): Promise<Todo> {
return lastValueFrom(
this.http.post<Todo>('https://jsonplaceholder.typicode.com/todos', todo),
)
}
}
interface Todo {
id: string
title: string
}
import { Component, Injectable, inject } from '@angular/core'
import { HttpClient } from '@angular/common/http'
import { lastValueFrom } from 'rxjs'
import {
injectMutation,
injectQuery,
QueryClient
} from '@tanstack/angular-query-experimental'
@Component({
standalone: true,
template: `
<div>
<button (click)="onAddTodo()">Add Todo</button>
<ul>
@for (todo of query.data(); track todo.title) {
<li>{{ todo.title }}</li>
}
</ul>
</div>
`,
})
export class TodosComponent {
todoService = inject(TodoService)
queryClient = inject(QueryClient)
query = injectQuery(() => ({
queryKey: ['todos'],
queryFn: () => this.todoService.getTodos(),
}))
mutation = injectMutation(() => ({
mutationFn: (todo: Todo) => this.todoService.addTodo(todo),
onSuccess: () => {
this.queryClient.invalidateQueries({ queryKey: ['todos'] })
},
}))
onAddTodo() {
this.mutation.mutate({
id: Date.now().toString(),
title: 'Do Laundry',
})
}
}
@Injectable({ providedIn: 'root' })
export class TodoService {
private http = inject(HttpClient)
getTodos(): Promise<Todo[]> {
return lastValueFrom(
this.http.get<Todo[]>('https://jsonplaceholder.typicode.com/todos'),
)
}
addTodo(todo: Todo): Promise<Todo> {
return lastValueFrom(
this.http.post<Todo>('https://jsonplaceholder.typicode.com/todos', todo),
)
}
}
interface Todo {
id: string
title: string
}
