fix: load uri from settings

packages/client/nginx.conf

@@ -6,11 +6,4 @@ server {
         index index.html index.htm;
         try_files $uri $uri/ /index.html =404;
     }
-
-    location /graphql {
-        proxy_pass $AUTH_SERVICE_URL;
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-    }
 }

packages/client/src/app.tsx

@@ -13,8 +13,8 @@ import { Paths } from '@constants/paths';
 
 export const App: FC = () => {
   return (
-    <GraphqlProvider>
-      <SettingsProvider>
+    <SettingsProvider>
+      <GraphqlProvider>
         <ThemeProvider>
           <Router>
             <ProjectProvider>
@@ -29,7 +29,7 @@ export const App: FC = () => {
             </ProjectProvider>
           </Router>
         </ThemeProvider>
-      </SettingsProvider>
-    </GraphqlProvider>
+      </GraphqlProvider>
+    </SettingsProvider>
   );
 };

packages/client/src/context/settings.context.tsx

@@ -4,10 +4,12 @@ import { ThemeType } from '@theme/theme.provider';
 export interface Settings {
   theme: ThemeType;
   lastProject?: string;
+  uri?: string;
 }
 
 const defaultSettings: Settings = {
-  theme: 'light'
+  theme: 'light',
+  uri: import.meta.env.VITE_AUTH_SERVICE
 };
 
 export interface SettingsContextProps {
@@ -22,7 +24,12 @@ export interface SettingsProviderProps {
 }
 
 export const SettingsProvider: FC<SettingsProviderProps> = (props) => {
-  const [settings, setSettings] = useState<Settings>(restoreSettings());
+  const [settings, setSettings] = useState<Settings>(defaultSettings);
+
+  useEffect(() => {
+    // Restore settings from local storage
+    restoreSettings().then((settings) => setSettings(settings));
+  }, []);
 
   useEffect(() => {
     // Save settings to local storage
@@ -36,9 +43,20 @@ const saveSettings = (settings: Settings) => {
   localStorage.setItem('settings', JSON.stringify(settings));
 };
 
-const restoreSettings = (): Settings => {
-  const settings = localStorage.getItem('settings');
-  return settings ? JSON.parse(settings) : defaultSettings;
+const restoreSettings = async (): Promise<Settings> => {
+  let settings = defaultSettings;
+  const storedSettings = localStorage.getItem('settings');
+  if (storedSettings) {
+    settings = { ...settings, ...JSON.parse(storedSettings) };
+  }
+  try {
+    const response = await fetch('/env.json');
+    const env = await response.json();
+    settings = { ...settings, ...env };
+  } catch (e) {
+    console.error(e);
+  }
+  return settings;
 };
 
 export const useSettings = () => useContext(SettingsContext);

packages/client/src/graphql/graphql-provider.tsx

@@ -1,15 +1,31 @@
-import React, { FC } from 'react';
+import React, { FC, useEffect } from 'react';
 import { ApolloClient, ApolloProvider, from, HttpLink, InMemoryCache } from '@apollo/client';
+import { useSettings } from '@context/settings.context';
+import { LoadingScreen } from '@components/loading-screen';
 
 export interface GraphqlProviderProps {
   children: React.ReactNode;
 }
 
 export const GraphqlProvider: FC<GraphqlProviderProps> = ({ children }) => {
-  const httpLink = new HttpLink({
-    fetch: fetch,
-    uri: import.meta.env.VITE_AUTH_SERVICE || '/graphql'
-  });
+  const { settings } = useSettings();
+  const [httpLink, setHttpLink] = React.useState<HttpLink>();
+
+  useEffect(() => {
+    if (settings?.uri) {
+      setHttpLink(
+        new HttpLink({
+          uri: settings.uri,
+          fetch: fetch
+        })
+      );
+    }
+  }, [settings]);
+
+  if (!httpLink) {
+    return <LoadingScreen />;
+  }
+
   const apolloClient = new ApolloClient({
     cache: new InMemoryCache({
       resultCaching: true