Auf dieser Seite
Invalidationen durch Mutationen
Das Invalidieren von Queries ist nur die halbe Miete. Zu wissen, wann man sie invalidieren muss, ist die andere Hälfte. Normalerweise, wenn eine Mutation in Ihrer App erfolgreich ist, ist es SEHR wahrscheinlich, dass es verwandte Queries in Ihrer Anwendung gibt, die invalidiert und möglicherweise neu geladen werden müssen, um die neuen Änderungen aus Ihrer Mutation zu berücksichtigen.
Nehmen wir zum Beispiel an, wir haben eine Mutation, um ein neues Todo zu posten
mutation = injectMutation(() => ({
mutationFn: postTodo,
}))
mutation = injectMutation(() => ({
mutationFn: postTodo,
}))
Wenn eine erfolgreiche postTodo Mutation stattfindet, möchten wir wahrscheinlich, dass alle todos Queries invalidiert und möglicherweise neu geladen werden, um das neue Todo-Element anzuzeigen. Dazu können Sie die onSuccess Optionen von injectMutation und die invalidateQueries Funktion des client verwenden.
import { injectMutation, useQueryClient } from '@tanstack/react-query'
const queryClient = useQueryClient()
// When this mutation succeeds, invalidate any queries with the `todos` or `reminders` query key
const mutation = injectMutation({
mutationFn: addTodo,
onSuccess: async () => {
// If you're invalidating a single query
await queryClient.invalidateQueries({ queryKey: ['todos'] })
// If you're invalidating multiple queries
await Promise.all([
queryClient.invalidateQueries({ queryKey: ['todos'] }),
queryClient.invalidateQueries({ queryKey: ['reminders'] }),
])
},
})
import { injectMutation, useQueryClient } from '@tanstack/react-query'
const queryClient = useQueryClient()
// When this mutation succeeds, invalidate any queries with the `todos` or `reminders` query key
const mutation = injectMutation({
mutationFn: addTodo,
onSuccess: async () => {
// If you're invalidating a single query
await queryClient.invalidateQueries({ queryKey: ['todos'] })
// If you're invalidating multiple queries
await Promise.all([
queryClient.invalidateQueries({ queryKey: ['todos'] }),
queryClient.invalidateQueries({ queryKey: ['reminders'] }),
])
},
})
Das Zurückgeben eines Promises bei onSuccess stellt sicher, dass die Daten aktualisiert werden, bevor die Mutation vollständig abgeschlossen ist (d.h. isPending ist true, bis onSuccess erfüllt ist)
import {
injectMutation,
QueryClient,
} from '@tanstack/angular-query-experimental'
export class TodosComponent {
queryClient = inject(QueryClient)
// When this mutation succeeds, invalidate any queries with the `todos` or `reminders` query key
mutation = injectMutation(() => ({
mutationFn: addTodo,
onSuccess: () => {
this.queryClient.invalidateQueries({ queryKey: ['todos'] })
this.queryClient.invalidateQueries({ queryKey: ['reminders'] })
},
}))
}
import {
injectMutation,
QueryClient,
} from '@tanstack/angular-query-experimental'
export class TodosComponent {
queryClient = inject(QueryClient)
// When this mutation succeeds, invalidate any queries with the `todos` or `reminders` query key
mutation = injectMutation(() => ({
mutationFn: addTodo,
onSuccess: () => {
this.queryClient.invalidateQueries({ queryKey: ['todos'] })
this.queryClient.invalidateQueries({ queryKey: ['reminders'] })
},
}))
}
Weiterführende Lektüre
Eine Technik zur automatischen Invalidierung von Queries nach Mutationen finden Sie unter Automatische Query-Invalidierung nach Mutationen in den Community-Ressourcen.
