I have a component that uses useQuery
to fetch and display a list of Cities.
Cities.js
const { data, isInitialLoading, isError, refetch } = useQuery(
["cities"],
() => axios.get("http://localhost/cities"),
{
staleTime: 10000,
}
);
// Display loading indicator
if (isInitialLoading) {
return <div>Loading...</div>;
}
return (
// Display cities
{data.map(city => {
return <p> City: {city.name} </p>
})}
// Call refetch method once clicked
<button onClick={() => refetch()}> call refetch</button>
)
The button displayed above should refetch
data once clicked. My question is that when the refetch
method is called manually like in the example above, does react-query
search cache
first, and then return a cached
result if it exists, or does refetch
always make a brand new fetch request to the specified endpoint? I have set staleTime
to 10 seconds in my example, therefore would refetch
return the cached result for 10 seconds, and then make new calls to the endpoint afterwards once data is considered stale
? If not, what alternative solutions could I implement in order to make use of cached
results when making manual refetch
calls? Thanks.