118 lines
2.7 KiB
Markdown
118 lines
2.7 KiB
Markdown
---
|
|
id: quick-start
|
|
title: Quick Start
|
|
---
|
|
|
|
> IMPORTANT: This library is currently in an experimental stage. This means that breaking changes will happen in minor AND patch releases. Upgrade carefully. If you use this in production while in experimental stage, please lock your version to a patch-level version to avoid unexpected breaking changes.
|
|
|
|
[//]: # 'Example'
|
|
|
|
If you're looking for a fully functioning example, please have a look at our [basic codesandbox example](./examples/basic)
|
|
|
|
### Provide the client to your App
|
|
|
|
```ts
|
|
import { provideHttpClient } from '@angular/common/http'
|
|
import {
|
|
provideTanStackQuery,
|
|
QueryClient,
|
|
} from '@tanstack/angular-query-experimental'
|
|
|
|
bootstrapApplication(AppComponent, {
|
|
providers: [provideHttpClient(), provideTanStackQuery(new QueryClient())],
|
|
})
|
|
```
|
|
|
|
or in a NgModule-based 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 {}
|
|
```
|
|
|
|
### Component with query and 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({
|
|
template: `
|
|
<div>
|
|
<button (click)="onAddTodo()">Add Todo</button>
|
|
|
|
<ul>
|
|
@for (todo of todosQuery.data(); track todo.title) {
|
|
<li>{{ todo.title }}</li>
|
|
}
|
|
</ul>
|
|
</div>
|
|
`,
|
|
})
|
|
export class TodosComponent {
|
|
readonly todoService = inject(TodoService)
|
|
readonly queryClient = inject(QueryClient)
|
|
|
|
readonly todosQuery = injectQuery(() => ({
|
|
queryKey: ['todos'],
|
|
queryFn: () => this.todoService.getTodos(),
|
|
}))
|
|
|
|
readonly addTodoMutation = injectMutation(() => ({
|
|
mutationFn: (todo: Todo) => this.todoService.addTodo(todo),
|
|
onSuccess: () => {
|
|
this.queryClient.invalidateQueries({ queryKey: ['todos'] })
|
|
},
|
|
}))
|
|
|
|
onAddTodo() {
|
|
this.addTodoMutation.mutate({
|
|
id: Date.now().toString(),
|
|
title: 'Do Laundry',
|
|
})
|
|
}
|
|
}
|
|
|
|
@Injectable({ providedIn: 'root' })
|
|
export class TodoService {
|
|
private readonly 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
|
|
}
|
|
```
|
|
|
|
[//]: # 'Example'
|