Begrip: Queries invalideren

Om data die opgehaald is door de useSuspenseQuery hook te verversen nadat deze aangepast is, moet de huidige data eerst geïnvalideerd worden.

Dit kan door een combinatie van de invalidateQueries uit de QueryClient, de onSuccess property van de useMutation hook en de useQueryClient hook waarmee de queryClient uit de dichtstbijzijnde QueryClientProvider opgehaald kan worden.

De invalidateQueries methode wordt gebruikt om één of meerdere queries te invalideren, vervolgens wordt de data opnieuw opgehaald van de server. Voor een volledige lijst van mogelijke parameters voor invalidateQueries verwijzen we door naar de documentatie.

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

const useGetFoo = () => {
    return useSuspenseQuery({
        queryKey: ['foo'],
        queryFn: getFoo
    })
}

const useUpdateFoo = () => {
    const queryClient = useQueryClient()
    return useMutation({
        mutationFn: updateFoo,
        onSucces: () => queryClient.invalidateQueries({queryKey: ['foo']})
    })
}