refactor(web): utilize REACT_APP_BACKEND_URL for GQL and REST API URLs

.devcontainer/boot.sh

@@ -28,7 +28,7 @@ cd packages/web
 rm -rf .env
 echo "
 PORT=$WEB_PORT
-REACT_APP_GRAPHQL_URL=http://localhost:$BACKEND_PORT/graphql
+REACT_APP_BACKEND_URL=http://localhost:$BACKEND_PORT
 " >> .env
 cd $CURRENT_DIR
 

packages/web/.env-example

@@ -1,4 +1,4 @@
 PORT=3001
-REACT_APP_GRAPHQL_URL=http://localhost:3000/graphql
+REACT_APP_BACKEND_URL=http://localhost:3000
 # HTTPS=true
 REACT_APP_BASE_URL=http://localhost:3001

packages/web/package.json

@@ -48,7 +48,7 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "lint": "eslint .",
-    "prepack": "REACT_APP_GRAPHQL_URL=/graphql REACT_APP_REST_API_URL=/api yarn build"
+    "prepack": "yarn build"
   },
   "files": [
     "/build"

packages/web/src/config/app.js

@@ -1,8 +1,25 @@
+const backendUrl = process.env.REACT_APP_BACKEND_URL;
+
+const computeUrl = (url, backendUrl) => {
+  /**
+   * In case `backendUrl` is a host, we append the url to it.
+   **/
+  try {
+    return new URL(url, backendUrl).toString();
+  } catch (e) {
+    /*
+     * In case `backendUrl` is not qualified, we utilize `url` alone.
+     **/
+    return url;
+  }
+};
+
 const config = {
   baseUrl: process.env.REACT_APP_BASE_URL,
-  graphqlUrl: process.env.REACT_APP_GRAPHQL_URL,
-  restApiUrl: process.env.REACT_APP_REST_API_URL,
+  graphqlUrl: computeUrl('/graphql', backendUrl),
+  restApiUrl: computeUrl('/api', backendUrl),
   chatwootBaseUrl: 'https://app.chatwoot.com',
   supportEmailAddress: 'support@automatisch.io',
 };
+
 export default config;

packages/web/src/graphql/client.js

@@ -1,7 +1,9 @@
 import { ApolloClient } from '@apollo/client';
+
 import cache from './cache';
 import createLink from './link';
 import appConfig from 'config/app';
+
 const client = new ApolloClient({
   cache,
   link: createLink({ uri: appConfig.graphqlUrl }),
@@ -11,10 +13,19 @@ const client = new ApolloClient({
     },
   },
 });
+
 export function mutateAndGetClient(options) {
   const { onError, token } = options;
-  const link = createLink({ uri: appConfig.graphqlUrl, token, onError });
+
+  const link = createLink({
+    uri: appConfig.graphqlUrl,
+    token,
+    onError,
+  });
+
   client.setLink(link);
+
   return client;
 }
+
 export default client;