Introduction
Query invalidation is an essential part while working with React-Query. Usually, when there is a mutation in the app, there are queries related, and when a mutation succeeded, we need to invalidate the related queries, so we can fetch the last query including the last data from the mutation.
Example
Consider we have a simple todo app, as shown in the following picture:

This app consists of one query to fetch the todo’s, and one mutation to submit them.
// Query
const { status, data, error } = useQuery(['todos'], async () => {
const res = await axios.get('/api/data');
return res.data;
});
// Mutation
const addMutation = useMutation((value) => fetch(`/api/data?add=${value}`));
Now, to invalidate the query once the mutation submission succeeded, so we can fetch the last todo items, we need to use useMutation
‘s onSuccess
callback option, and call the queryClient.invalidateQueries(['todos'])
inside of it, as the following:
import {
useQuery,
useQueryClient,
useMutation,
} from '@tanstack/react-query';
function Example() {
const queryClient = useQueryClient();
const { status, data, error } = useQuery(['todos'], async () => {
const res = await axios.get('/api/data');
return res.data;
});
const addMutation = useMutation((value) => fetch(`/api/data?add=${value}`), {
onSuccess: () => queryClient.invalidateQueries(['todos']),
});
.....
Opening the Network tab, it does showing the following requests:

A POST request to add the new todo item, followed by a GET request to refetch all the items and re-render them.
Full Source Code.
That’s it for How to invalidate query after mutations in React-Query
As always happy coding!
Photo from Unsplash.