chore/Sett-opp-Apollo-Client-og-legg-til-.env.example-(#23)

backend/.env.example

@@ -0,0 +1,6 @@
+# Copy to .env and fill in your own values. .env must never be committed.
+DB_HOST=localhost
+DB_PORT=5432
+DB_NAME=winenot
+DB_USER=your_postgres_user
+DB_PASSWORD=

client/.env.example

@@ -0,0 +1,4 @@
+# URL to the GraphQL backend.
+# Locally: http://localhost:3001/
+# On the VM: set this to the VM's backend address before building.
+VITE_GRAPHQL_URL=http://localhost:3001/

client/package.json

@@ -10,8 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@apollo/client": "^4.3.2",
+    "graphql": "^16.14.2",
     "react": "^19.2.8",
-    "react-dom": "^19.2.8"
+    "react-dom": "^19.2.8",
+    "rxjs": "^7.8.2"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",

client/src/main.tsx

@@ -1,10 +1,30 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
+import { ApolloProvider } from '@apollo/client/react';
+import './index.css';
+import App from './App.tsx';
+
+/**
+ * Apollo Client handles communication with our GraphQL backend and is also
+ * our state management: InMemoryCache stores query results, so the same
+ * query isn't sent to the server again (fewer requests, more sustainable).
+ *
+ * The backend URL is read from the environment variable VITE_GRAPHQL_URL,
+ * so the same code works locally and on the VM. Without it, we use the
+ * local backend on port 3001.
+ */
+const client = new ApolloClient({
+  link: new HttpLink({
+    uri: import.meta.env.VITE_GRAPHQL_URL ?? 'http://localhost:3001/',
+  }),
+  cache: new InMemoryCache(),
+});
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <ApolloProvider client={client}>
+      <App />
+    </ApolloProvider>
   </StrictMode>,
-)
+);