xxxxxxxxxx
const queryCache = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
retry: false,
staleTime: 30000,
},
},
});
const App = () => (
<QueryClientProvider client={queryCache}>
<FirstSiblingComponent />
<SecondSiblingComponent />
</QueryClientProvider>
);
xxxxxxxxxx
import { useQuery } from 'react-query';
const MyComponent = () => {
const { data, isLoading } = useQuery('myData', () => fetchMyData(), {
staleTime: 300000, // 5 minutes in milliseconds
});
if (isLoading) {
return <div>Loading</div>;
}
return <div>Data: {data}</div>;
};
// Usage example
const App = () => {
return (
<div>
<h1>My App</h1>
<MyComponent />
</div>
);
};
export default App;