4 tanstack query setup

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);

project-1/src/api/queryKeys.ts

@@ -0,0 +1,3 @@
+export const queryKeys = {
+  forecast: (cityId: string) => ['forecast', cityId] as const,
+}

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>,
 )