From 16887540db360076afca8f6d3fdd0d2c9459e16b Mon Sep 17 00:00:00 2001
From: Sivert Smedsrud <sivert04@icloud.com>
Date: Mon, 14 Sep 2026 17:55:40 +0200
Subject: [PATCH 1/3] move QueryClient into main.tsx

QueryClientProvider now wraps App in main.tsx instead of being created
inside App.tsx itself.

Issue: #4
---
 project-1/src/api/queryKeys.ts | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 project-1/src/api/queryKeys.ts

diff --git a/project-1/src/api/queryKeys.ts b/project-1/src/api/queryKeys.ts
new file mode 100644
index 0000000..a607f66
--- /dev/null
+++ b/project-1/src/api/queryKeys.ts
@@ -0,0 +1,3 @@
+export const queryKeys = {
+  forecast: (cityId: string) => ['forecast', cityId] as const,
+}

From 77c017873af0f2b806dddfcb63a9f75fb2084066 Mon Sep 17 00:00:00 2001
From: Sivert Smedsrud <sivert04@icloud.com>
Date: Mon, 14 Sep 2026 17:56:32 +0200
Subject: [PATCH 2/3] changes committed

---
 project-1/src/App.tsx  | 21 +++------------------
 project-1/src/main.tsx | 17 ++++++++++++++++-
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/project-1/src/App.tsx b/project-1/src/App.tsx
index 33de32c..530afc1 100644
--- a/project-1/src/App.tsx
+++ b/project-1/src/App.tsx
@@ -1,24 +1,9 @@
-import {
-  QueryClient,
-  QueryClientProvider,
-  useQuery,
-} from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 import { useState } from 'react';
 
-// Initializing the TanStack Query Client
-const queryClient = new QueryClient()
-
-// Main App Structure
+// QueryClientProvider now lives in main.tsx, wrapping this component.
+// A component should never construct its own QueryClient.
 export default function App() {
-  return (
-    <QueryClientProvider client={queryClient}>
-      <DataScreen />
-    </QueryClientProvider>
-  )
-}
-
-// Getting / Using data
-function DataScreen() {
     // Using states to communicate between frontend and server
     const [lat, setLat] = useState(60);
     const [long, setLong] = useState(10);
diff --git a/project-1/src/main.tsx b/project-1/src/main.tsx
index bef5202..529a820 100644
--- a/project-1/src/main.tsx
+++ b/project-1/src/main.tsx
@@ -1,10 +1,25 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import './index.css'
 import App from './App.tsx'
 
+// Created once here (not inside a component) so it survives re-renders,
+// and so any hook in the tree can read the same cache.
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 30 * 60 * 1000, // MET updates roughly hourly, so there's no need to refetch sooner
+      retry: 1,
+      refetchOnWindowFocus: false,
+    },
+  },
+})
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
   </StrictMode>,
 )

From a2c71bd737a2536d65bba405d94853b651b8d101 Mon Sep 17 00:00:00 2001
From: Peder Orheim Hatlen <pederoha@stud.ntnu.no>
Date: Tue, 15 Sep 2026 11:32:00 +0200
Subject: [PATCH 3/3] feat: remove unnecessary api file

---
 project-1/src/api/queryKeys.ts | 3 ---
 1 file changed, 3 deletions(-)
 delete mode 100644 project-1/src/api/queryKeys.ts

diff --git a/project-1/src/api/queryKeys.ts b/project-1/src/api/queryKeys.ts
deleted file mode 100644
index a607f66..0000000
--- a/project-1/src/api/queryKeys.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const queryKeys = {
-  forecast: (cityId: string) => ['forecast', cityId] as const,
-}