The word stale means no longer fresh to use. In React Query, when a Query fetch an API and the response is ready, React Query marks it as stale. That is one of the reason why React Query looks for fresh content each time the page gets focus.
If we know that the content is going to remain fresh for some time, we can configure the stale time in React Query. It can be done by setting the staleTime
to required milli seconds.
const queryUsers = useQuery(
"gitUsers",
() => {
return fetch("https://api.github.com/search/users?q=joby").then((res) =>
res.json()
);
},
{ staleTime: 5000, });
In the above code, the query response will be fresh
for 5 seconds. After 5 seconds, the data become stale
.
staleTime
can be any number. By default, the value is 0. It can be Infinity
also, which means the data will always be fresh.