Reputation: 645
I have this simple app where makes a call to an API. Iam using react-query to make the fetch and also to cahche the data. But if you go to network and change to slow 3g, after its state change, it will make the call to API. The docs states react-query that in second attempts the cached data will be returned.
import React, { memo, useState } from "react";
import logo from "./logo.svg";
import "./App.css";
import { useQuery } from "react-query";
import Axios from "axios";
const fetchTodoList = async (key, id) => {
const { data } = await Axios.get(
`https://jsonplaceholder.typicode.com/photos`
);
return data;
};
function App() {
const [flag, setFlag] = useState(true);
const { isLoading, isError, data, error, isFetching } = useQuery(
"todos",
fetchTodoList
);
console.log(isFetching, data);
if (isLoading) {
return <span>Loading...</span>;
}
if (isError) {
return <span>Error: {error.message}</span>;
}
// also status === 'success', but "else" logic works, too
return (
<>
<button
onClick={() => {
setFlag(!flag);
}}
>
ddddddddd
</button>
<ul>
{data.map((todo) => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
</>
);
}
export default memo(App);
Upvotes: 0
Views: 967
Reputation: 1579
I think you got the wrong idea about the react-query API it's true that on the second attempt it will return the cached data but in the background, it will also refetch the data from the API so it can keep your app up to date.
Upvotes: 2