fix(SLB-209): proxy graphql requests

So it is possible to change Drupal's url via environment variables,
after build.

apps/preview/.lagoon.env

@@ -0,0 +1 @@
+DRUPAL_URL="https://${LAGOON_GIT_BRANCH}-${PROJECT_NAME}.cms.amazeelabs.dev"

apps/preview/package.json

@@ -16,6 +16,7 @@
     "@custom/ui": "workspace:*",
     "express": "^4.19.2",
     "express-ws": "^5.0.2",
+    "http-proxy-middleware": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rxjs": "^7.8.1"
@@ -25,6 +26,7 @@
     "@swc/core": "^1.3.102",
     "@types/express": "^4.17.21",
     "@types/express-ws": "^3.0.4",
+    "@types/http-proxy-middleware": "^1.0.0",
     "@types/node": "^20.11.17",
     "@types/react": "^18.2.46",
     "@types/react-dom": "^18.2.18",

apps/preview/server/index.ts

@@ -1,5 +1,6 @@
 import express from 'express';
 import expressWs from 'express-ws';
+import { createProxyMiddleware } from 'http-proxy-middleware';
 import { Subject } from 'rxjs';
 
 const expressServer = express();
@@ -8,6 +9,14 @@ const { app } = expressWsInstance;
 
 const updates$ = new Subject();
 
+app.use(
+  '/graphql',
+  createProxyMiddleware({
+    target: process.env.DRUPAL_URL || 'http://localhost:8888',
+    changeOrigin: true,
+  }),
+);
+
 // TODO: Protect endpoints and preview with Drupal authentication.
 app.post('/__preview', (req, res) => {
   updates$.next({ body: req.body });

apps/preview/src/App.tsx

@@ -17,12 +17,7 @@ function App() {
     return sub.unsubscribe;
   }, [refresh]);
   return (
-    <OperationExecutor
-      executor={drupalExecutor(
-        `${import.meta.env.VITE_DRUPAL_URL || 'http://localhost:8888'}/graphql`,
-        false,
-      )}
-    >
+    <OperationExecutor executor={drupalExecutor('/graphql', false)}>
       <Frame>
         <Preview />
       </Frame>