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

tsx

const mutation = useMutation({ mutationFn: postTodo })

const mutation = useMutation({ 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. Um dies zu tun, können Sie die onSuccess-Optionen von useMutation und die invalidateQueries-Funktion des client verwenden

tsx

import { useMutation, useQueryClient } from '@tanstack/react-query'

const queryClient = useQueryClient()

// When this mutation succeeds, invalidate any queries with the `todos` or `reminders` query key
const mutation = useMutation({
  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 { useMutation, useQueryClient } from '@tanstack/react-query'

const queryClient = useQueryClient()

// When this mutation succeeds, invalidate any queries with the `todos` or `reminders` query key
const mutation = useMutation({
  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)

tsx

import { useMutation, useQueryClient } from '@tanstack/vue-query'

const queryClient = useQueryClient()

// When this mutation succeeds, invalidate any queries with the `todos` or `reminders` query key
const mutation = useMutation({
  mutationFn: addTodo,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['todos'] })
    queryClient.invalidateQueries({ queryKey: ['reminders'] })
  },
})

import { useMutation, useQueryClient } from '@tanstack/vue-query'

const queryClient = useQueryClient()

// When this mutation succeeds, invalidate any queries with the `todos` or `reminders` query key
const mutation = useMutation({
  mutationFn: addTodo,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['todos'] })
    queryClient.invalidateQueries({ queryKey: ['reminders'] })
  },
})

Weiterführende Lektüre

Für eine Technik zur automatischen Invalidierung von Queries nach Mutationen werfen Sie einen Blick auf Automatische Query-Invalidierung nach Mutationen aus den Community-Ressourcen.

Weiterführende Lektüre

Möchten Sie die Dokumentation überspringen?

Möchten Sie die Dokumentation überspringen?