From 2e19cf6592d546ffa1ce31ed40da80a5f554a9b4 Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Mon, 17 Feb 2020 22:54:19 +0100
Subject: [PATCH] fix(nuxt-env): Configuration issue with websockets

After some intensive debugging I found out that `req` (on the server)
and `nuxtState` (on the client) have access to the configurations
changed at runtime.

How did I debug it:
```
yarn run build
env WEBSOCKET_URI=whatever yarn run start
```
I also put a `console.log` into `plugins/apollo-client.js`.
---
 webapp/.env.template            | 2 ++
 webapp/nuxt.config.js           | 8 +++++++-
 webapp/plugins/apollo-config.js | 7 ++++---
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/webapp/.env.template b/webapp/.env.template
index fdabcf003..b00e6855a 100644
--- a/webapp/.env.template
+++ b/webapp/.env.template
@@ -2,3 +2,5 @@ MAPBOX_TOKEN="pk.eyJ1IjoiaHVtYW4tY29ubmVjdGlvbiIsImEiOiJjajl0cnBubGoweTVlM3VwZ2l
 SENTRY_DSN_WEBAPP=
 COMMIT=
 PUBLIC_REGISTRATION=false
+WEBSOCKETS_URI=ws://localhost:3000/api/graphql
+GRAPHQL_URI=http://localhost:4000/
diff --git a/webapp/nuxt.config.js b/webapp/nuxt.config.js
index c1283a9be..2ef42f139 100644
--- a/webapp/nuxt.config.js
+++ b/webapp/nuxt.config.js
@@ -4,7 +4,13 @@ import dotenv from 'dotenv'
 dotenv.config() // we want to synchronize @nuxt-dotenv and nuxt-env
 
 const pkg = require('./package')
-export const envWhitelist = ['NODE_ENV', 'MAPBOX_TOKEN', 'PUBLIC_REGISTRATION']
+export const envWhitelist = [
+  'NODE_ENV',
+  'MAPBOX_TOKEN',
+  'PUBLIC_REGISTRATION',
+  'WEBSOCKETS_URI',
+  'GRAPHQL_URI',
+]
 const dev = process.env.NODE_ENV !== 'production'
 
 const styleguidePath = '../styleguide'
diff --git a/webapp/plugins/apollo-config.js b/webapp/plugins/apollo-config.js
index b89d9a188..63282a341 100644
--- a/webapp/plugins/apollo-config.js
+++ b/webapp/plugins/apollo-config.js
@@ -5,11 +5,12 @@ const fragmentMatcher = new IntrospectionFragmentMatcher({
   introspectionQueryResultData,
 })
 
-export default ({ app }) => {
-  const backendUrl = process.env.GRAPHQL_URI || 'http://localhost:4000'
+export default ({ req, nuxtState }) => {
+  const { env } = req || nuxtState
+  const backendUrl = env.GRAPHQL_URI || 'http://localhost:4000'
 
   return {
-    wsEndpoint: process.env.WEBSOCKETS_URI || 'ws://localhost:4000/graphql',
+    wsEndpoint: env.WEBSOCKETS_URI || 'ws://localhost:4000/graphql',
     httpEndpoint: process.server ? backendUrl : '/api',
     httpLinkOptions: {
       credentials: 'same-origin',