feat: create a query hook for country data

country-explorer/src/components/App.tsx

@@ -4,8 +4,6 @@ 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/hooks/useCountries.ts

@@ -0,0 +1,23 @@
+import { useQuery } from '@tanstack/react-query';
+import { getCountriesByRegion } from '../api/countries';
+
+const DEFAULT_REGION = 'europe';
+
+// Centralizes the query key so it's built the same way everywhere it's
+// needed (e.g. a future manual refetch/invalidate call), instead of a
+// duplicated inline array.
+export const countriesQueryKey = (region: string) => ['countries', region] as const;
+
+export function useCountries(region: string = DEFAULT_REGION) {
+  const { data, isLoading, isError, error } = useQuery({
+    queryKey: countriesQueryKey(region),
+    queryFn: () => getCountriesByRegion(region),
+  });
+
+  return {
+    countries: data ?? [],
+    isLoading,
+    isError,
+    error,
+  };
+}

country-explorer/src/lib/queryClient.ts

@@ -1,4 +1,4 @@
-import { QueryClient } from '@tanstack/react-query'
+import { QueryClient } from '@tanstack/react-query';
 
 export const queryClient = new QueryClient({
   defaultOptions: {
@@ -10,4 +10,4 @@ export const queryClient = new QueryClient({
       retry: 1,
     },
   },
-})
+});

country-explorer/src/main.tsx

@@ -1,14 +1,14 @@
-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'
+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>
     <QueryClientProvider client={queryClient}>
       <App />
     </QueryClientProvider>
   </StrictMode>,
-)
+);