How to invalidate query after mutations in React-Query

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.