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:

How to invalidate query after mutations in React-Query
How to invalidate query after mutations in React-Query

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:
How to invalidate query after mutations in React-Query
How to invalidate query after mutations in React-Query

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.

Related Posts

How to remove highcharts.com credits link

How to remove highcharts.com credits link

Highcharts is a popular JavaScript charting library that offers a wide range of interactive and customizable charts for developers. However, if you’re using the free version of…

Highcharts Place text in the center of a pie chart

Highcharts Place text in the center of a pie chart

To place text in the center of a pie chart in Highcharts, you can use the chart.renderer object to create a custom label and position it in…

Test design breakpoints using jest and react-testing-library

Test responsive design using jest and react-testing-library

Testing design breakpoints in React applications is an important aspect of front-end development. It ensures that the components look and behave as expected on different screen sizes….

Testing React-Query with Jest and React-testing-library

Testing React-Query with Jest and React-testing-library

Introduction In this article we will cover the basic usage of testing useQuery hook from tanstack/react-query library, along with how to test it using jest and react-testing-library….

Highcharts How To Change Series Color with examples

Highcharts How To Change Series Color with examples

To change the color of a series in Highcharts, there are a set of options we are going to discover in this article. Option 1: Using the…

A quick introduction to Javascript shadow DOM

A quick introduction to Javascript shadow DOM

Introduction JavaScript Shadow DOM is a powerful tool for creating isolated and reusable components in web development. It allows developers to create custom elements with their own…

Leave a Reply

%d bloggers like this: