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

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;