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.