42 lines
1.0 KiB
Markdown
42 lines
1.0 KiB
Markdown
---
|
|
id: invalidations-from-mutations
|
|
title: Invalidations from Mutations
|
|
ref: docs/framework/react/guides/invalidations-from-mutations.md
|
|
replace: { 'useMutation': 'injectMutation', 'hook': 'function' }
|
|
---
|
|
|
|
[//]: # 'Example'
|
|
|
|
```ts
|
|
postTodoMutation = injectMutation(() => ({
|
|
mutationFn: postTodo,
|
|
}))
|
|
```
|
|
|
|
[//]: # 'Example'
|
|
[//]: # 'Example2'
|
|
|
|
```ts
|
|
import {
|
|
injectMutation,
|
|
QueryClient,
|
|
} from '@tanstack/angular-query-experimental'
|
|
|
|
export class TodosComponent {
|
|
readonly queryClient = inject(QueryClient)
|
|
|
|
// When this mutation succeeds, invalidate any queries with the `todos` or `reminders` query key
|
|
readonly addTodoMutation = injectMutation(() => ({
|
|
mutationFn: addTodo,
|
|
onSuccess: () => {
|
|
this.queryClient.invalidateQueries({ queryKey: ['todos'] })
|
|
this.queryClient.invalidateQueries({ queryKey: ['reminders'] })
|
|
},
|
|
}))
|
|
}
|
|
```
|
|
|
|
[//]: # 'Example2'
|
|
|
|
You can wire up your invalidations to happen using any of the callbacks available in the [`injectMutation` function](./mutations.md)
|