feat: install and configure TanStack Query

country-explorer/package.json

@@ -13,6 +13,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.102.8",
     "react": "^19.2.8",
     "react-dom": "^19.2.8"
   },

country-explorer/src/components/App.tsx

@@ -4,6 +4,8 @@ import reactLogo from '../assets/react.svg';
 import viteLogo from '../assets/vite.svg';
 import './App.css';
 
+
+
 function App() {
   const [count, setCount] = useState(0);
 

country-explorer/src/lib/queryClient.ts

@@ -0,0 +1,13 @@
+import { QueryClient } from '@tanstack/react-query'
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 60 * 1000,
+      refetchOnWindowFocus: false,
+      refetchOnMount: true,
+      refetchOnReconnect: true,
+      retry: 1,
+    },
+  },
+})

country-explorer/src/main.tsx

@@ -1,10 +1,14 @@
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-import './index.css';
-import App from './components/App.tsx';
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { QueryClientProvider } from '@tanstack/react-query'
+import './index.css'
+import App from './components/App'
+import { queryClient } from './lib/queryClient'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
   </StrictMode>,
-);
+)