Exploring the Important Defaults section:
When using useQuery or useInfiniteQuery, cached data is automatically considered stale by default.
Stale queries are refreshed in the background under these conditions:
- New instances of the query are mounted
Once a query's data is successfully fetched, it becomes immediately stale which leads to frequent refetching whenever the tab is changed. Adjust the staleTime (defaulted to 0) to control the refetch behavior:
const { isLoading, error, data } = useQuery("planets", fetchPlanets, {
staleTime: 10000, // only eligible for refresh after 10 seconds
});
Alternatively, you can globally set the staleTime for all queries when instantiating QueryClient like this:
const queryClient = new QueryClient({
defaultOptions: { queries: { staleTime: 10000 }}
});
In your code, there is another issue unrelated to react-query. Here's where the problem lies:
function App() {
const [page, setPage] = useState("planets");
const queryClient = new QueryClient();
const pageSetter = (page) => {
setPage(page);
};
return (
<QueryClientProvider client={queryClient}>
<div className="App">
<h1>Star Wars Info</h1>
<Navbar setPage={pageSetter} />
<div className="content">
{page === "planets" ? <Planets /> : <People />}
</div>
</div>
</QueryClientProvider>
);
}
Each time the user switches between displaying different data sources, the entire component re-renders causing a new instance of queryClient to be created and passed to QueryClientProvider, thereby resetting any client cache state. It’s recommended to refactor your components to prevent unnecessary re-rendering as shown below:
function Content() {
const [page, setPage] = useState("planets");
const pageSetter = (page) => {
setPage(page);
};
return (
<div className="App">
<h1>Star Wars Info</h1>
<Navbar setPage={pageSetter} />
<div className="content">
{page === "planets" ? <Planets /> : <People />}
</div>
</div>
);
}
// top level component, should not get re-rendered
function App() {
const queryClient = new QueryClient();
return (
<QueryClientProvider client={queryClient}>
<Content />
</QueryClientProvider>
);
}
Live Demo
https://codesandbox.io/s/67040687react-query-doesnt-seem-to-be-caching-lgfej?file=/src/App.js