Categories
React

Update React Query Cache with the setQueryData Method

Spread the love

Sometimes, we may want to update the React Query cache so that the data that’s used to render the HTML is updated on the client-side to display the latest data without fetching it from the server again.

In this article, we’ll look at how to use React Query’s setQueryData method to update the query cache data on the client-side.

Using the setQueryData Method to Update Data Cached from Making Requests

We can use the React Query’s queryClient ‘s setQueryData method to update the cached response data from making HTTP requests.

To do this, we write:

index.js

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import { QueryClient, QueryClientProvider } from "react-query";

import App from "./App";
export const queryClient = new QueryClient();

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </StrictMode>,
  rootElement
);

App.js

import axios from "axios";
import React from "react";
import { useQuery } from "react-query";
import { queryClient } from "./index";

export default function App() {
  const { data } = useQuery("yesno", () => axios.get("https://yesno.wtf/api"));

const setData = () => {
    queryClient.setQueryData("yesno", (data) => {
      return {
        data: {
          ...data.data,
          answer: data.data.answer === "yes" ? "no" : "yes"
        }
      };
    });
  };

  return (
    <div>
      <button onClick={setData}>toggle</button>
      <div>{data?.data?.answer}</div>
    </div>
  );
}

In index.js , we create a new QueryClient instance that we use with the QueryClientProvider component so that we can use the React Query hooks to make requests.

Then in App.js , we use the useQuery hook to make requests.

We pass in the name of the query as the first argument.

The 2nd argument is a function that returns a promise with the HTTP request response.

The data property of the returned object has the response data.

In the setData function, we call queryClient.setQueryData with the identifier of the request we want to update as passed into useQuery ‘s first argument.

The 2nd argument is a callback that takes the cached response data for the request with the identifier in the first argument, and we return the object that will be the new value of the item that’s cached with the given identifier.

We toggle the value of the data.data.answer value from the response in setData .

And we call that when we click on the toggle button.

Therefore, we should see the data.data.answer value toggle between 'yes' and 'no' when we click the toggle button.

This is because we update the query cache data entry for the request with the identifier passed into the first argument of sertQueryData to what we want on the client-side.

Conclusion

We can update the cached response data on the client side with React Query’s query client’s setQueryData method.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *