From efc42b5b01419784fb4036fba8cb7d3aba2ae884 Mon Sep 17 00:00:00 2001
From: Sawaymaan Singh <sawaymas@stud.ntnu.no>
Date: Mon, 14 Sep 2026 00:25:09 +0200
Subject: [PATCH] feat: create a query hook for country data

Add useCountries, a TanStack Query hook wired to getCountriesByRegion with data/loading/error state.

Closes #10
---
 country-explorer/src/components/App.tsx    |  2 --
 country-explorer/src/hooks/useCountries.ts | 23 ++++++++++++++++++++++
 country-explorer/src/lib/queryClient.ts    |  4 ++--
 country-explorer/src/main.tsx              | 14 ++++++-------
 4 files changed, 32 insertions(+), 11 deletions(-)
 create mode 100644 country-explorer/src/hooks/useCountries.ts

diff --git a/country-explorer/src/components/App.tsx b/country-explorer/src/components/App.tsx
index de1b0b2..0937f92 100644
--- a/country-explorer/src/components/App.tsx
+++ b/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);
 
diff --git a/country-explorer/src/hooks/useCountries.ts b/country-explorer/src/hooks/useCountries.ts
new file mode 100644
index 0000000..c9adab9
--- /dev/null
+++ b/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,
+  };
+}
diff --git a/country-explorer/src/lib/queryClient.ts b/country-explorer/src/lib/queryClient.ts
index f2b7248..d0e03b3 100644
--- a/country-explorer/src/lib/queryClient.ts
+++ b/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,
     },
   },
-})
\ No newline at end of file
+});
diff --git a/country-explorer/src/main.tsx b/country-explorer/src/main.tsx
index 4b09d63..1c4e1a5 100644
--- a/country-explorer/src/main.tsx
+++ b/country-explorer/src/main.tsx
@@ -1,9 +1,9 @@
-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>
@@ -11,4 +11,4 @@ createRoot(document.getElementById('root')!).render(
       <App />
     </QueryClientProvider>
   </StrictMode>,
-)
\ No newline at end of file
+);