Fix Client Config async loading (#12308)

Fix ClientConfig async loading

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-front/src/modules/client-config/components/ClientConfigProvider.tsx

@@ -2,26 +2,11 @@ import { useRecoilValue } from 'recoil';
 
 import { clientConfigApiStatusState } from '@/client-config/states/clientConfigApiStatusState';
 import { AppFullScreenErrorFallback } from '@/error-handler/components/AppFullScreenErrorFallback';
-import { AppPath } from '@/types/AppPath';
-import { useLocation } from 'react-router-dom';
-import { isMatchingLocation } from '~/utils/isMatchingLocation';
 
 export const ClientConfigProvider: React.FC<React.PropsWithChildren> = ({
   children,
 }) => {
-  const { isLoaded, isErrored, error } = useRecoilValue(
-    clientConfigApiStatusState,
-  );
-
-  const location = useLocation();
-
-  // TODO: Implement a better loading strategy
-  if (
-    !isLoaded &&
-    !isMatchingLocation(location, AppPath.Verify) &&
-    !isMatchingLocation(location, AppPath.VerifyEmail)
-  )
-    return null;
+  const { isErrored, error } = useRecoilValue(clientConfigApiStatusState);
 
   return isErrored && error instanceof Error ? (
     <AppFullScreenErrorFallback

packages/twenty-front/src/modules/client-config/components/ClientConfigProviderEffect.tsx

@@ -1,3 +1,4 @@
+import { useClientConfig } from '@/client-config/hooks/useClientConfig';
 import { apiConfigState } from '@/client-config/states/apiConfigState';
 import { authProvidersState } from '@/client-config/states/authProvidersState';
 import { billingState } from '@/client-config/states/billingState';
@@ -23,7 +24,6 @@ import { domainConfigurationState } from '@/domain-manager/states/domainConfigur
 import { useEffect } from 'react';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
-import { useGetClientConfigQuery } from '~/generated/graphql';
 
 export const ClientConfigProviderEffect = () => {
   const setIsDebugMode = useSetRecoilState(isDebugModeState);
@@ -87,16 +87,16 @@ export const ClientConfigProviderEffect = () => {
     isConfigVariablesInDbEnabledState,
   );
 
-  const { data, loading, error } = useGetClientConfigQuery({
-    skip: clientConfigApiStatus.isLoaded,
-  });
+  const { data, loading, error, fetchClientConfig } = useClientConfig();
+
+  useEffect(() => {
+    if (!clientConfigApiStatus.isLoaded) {
+      fetchClientConfig();
+    }
+  }, [clientConfigApiStatus.isLoaded, fetchClientConfig]);
 
   useEffect(() => {
     if (loading) return;
-    setClientConfigApiStatus((currentStatus) => ({
-      ...currentStatus,
-      isLoaded: true,
-    }));
 
     if (error instanceof Error) {
       setClientConfigApiStatus((currentStatus) => ({
@@ -165,6 +165,10 @@ export const ClientConfigProviderEffect = () => {
     setIsConfigVariablesInDbEnabled(
       data?.clientConfig?.isConfigVariablesInDbEnabled,
     );
+    setClientConfigApiStatus((currentStatus) => ({
+      ...currentStatus,
+      isLoaded: true,
+    }));
   }, [
     data,
     setIsDebugMode,

packages/twenty-front/src/modules/client-config/hooks/useClientConfig.ts

@@ -0,0 +1,58 @@
+import { useRecoilCallback, useRecoilValue } from 'recoil';
+import { ClientConfig } from '~/generated/graphql';
+import { clientConfigApiStatusState } from '../states/clientConfigApiStatusState';
+import { getClientConfig } from '../utils/getClientConfig';
+
+type UseClientConfigResult = {
+  data: { clientConfig: ClientConfig } | undefined;
+  loading: boolean;
+  error: Error | undefined;
+  fetchClientConfig: () => Promise<void>;
+  refetch: () => Promise<void>;
+};
+
+export const useClientConfig = (): UseClientConfigResult => {
+  const clientConfigApiStatus = useRecoilValue(clientConfigApiStatusState);
+
+  const fetchClientConfig = useRecoilCallback(
+    ({ set }) =>
+      async () => {
+        set(clientConfigApiStatusState, (prev) => ({
+          ...prev,
+          isLoading: true,
+          isErrored: false,
+          error: undefined,
+        }));
+
+        try {
+          const clientConfig = await getClientConfig();
+          set(clientConfigApiStatusState, (prev) => ({
+            ...prev,
+            isLoading: false,
+            isLoaded: true,
+            data: { clientConfig },
+          }));
+        } catch (err) {
+          const error =
+            err instanceof Error
+              ? err
+              : new Error('Failed to fetch client config');
+          set(clientConfigApiStatusState, (prev) => ({
+            ...prev,
+            isLoading: false,
+            isErrored: true,
+            error,
+          }));
+        }
+      },
+    [],
+  );
+
+  return {
+    data: clientConfigApiStatus.data,
+    loading: clientConfigApiStatus.isLoading || false,
+    error: clientConfigApiStatus.error,
+    fetchClientConfig,
+    refetch: fetchClientConfig,
+  };
+};

packages/twenty-front/src/modules/client-config/states/clientConfigApiStatusState.ts

@@ -1,11 +1,21 @@
 import { createState } from 'twenty-ui/utilities';
+import { ClientConfig } from '~/generated/graphql';
+
 type ClientConfigApiStatus = {
   isLoaded: boolean;
+  isLoading: boolean;
   isErrored: boolean;
   error?: Error;
+  data?: { clientConfig: ClientConfig };
 };
 
 export const clientConfigApiStatusState = createState<ClientConfigApiStatus>({
   key: 'clientConfigApiStatus',
-  defaultValue: { isLoaded: false, isErrored: false, error: undefined },
+  defaultValue: {
+    isLoaded: false,
+    isLoading: false,
+    isErrored: false,
+    error: undefined,
+    data: undefined,
+  },
 });

packages/twenty-front/src/modules/client-config/utils/__tests__/clientConfigUtils.test.ts

@@ -0,0 +1,95 @@
+import { REACT_APP_SERVER_BASE_URL } from '~/config';
+import { getClientConfig } from '../getClientConfig';
+
+global.fetch = jest.fn();
+
+const mockClientConfig = {
+  billing: {
+    isBillingEnabled: true,
+    billingUrl: 'https://billing.example.com',
+    trialPeriods: [],
+  },
+  authProviders: {
+    google: true,
+    magicLink: false,
+    password: true,
+    microsoft: false,
+    sso: [],
+  },
+  signInPrefilled: false,
+  isMultiWorkspaceEnabled: true,
+  isEmailVerificationRequired: false,
+  defaultSubdomain: 'app',
+  frontDomain: 'localhost',
+  debugMode: true,
+  support: {
+    supportDriver: 'none',
+    supportFrontChatId: undefined,
+  },
+  sentry: {
+    environment: 'development',
+    release: '1.0.0',
+    dsn: undefined,
+  },
+  captcha: {
+    provider: undefined,
+    siteKey: undefined,
+  },
+  chromeExtensionId: undefined,
+  api: {
+    mutationMaximumAffectedRecords: 100,
+  },
+  isAttachmentPreviewEnabled: true,
+  analyticsEnabled: false,
+  canManageFeatureFlags: true,
+  publicFeatureFlags: [],
+  isMicrosoftMessagingEnabled: false,
+  isMicrosoftCalendarEnabled: false,
+  isGoogleMessagingEnabled: false,
+  isGoogleCalendarEnabled: false,
+  isConfigVariablesInDbEnabled: false,
+};
+
+describe('getClientConfig', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should fetch client config from API', async () => {
+    (fetch as jest.Mock).mockResolvedValueOnce({
+      ok: true,
+      json: async () => mockClientConfig,
+    });
+
+    const result = await getClientConfig();
+
+    expect(fetch).toHaveBeenCalledWith(
+      `${REACT_APP_SERVER_BASE_URL}/client-config`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      },
+    );
+    expect(result).toEqual(mockClientConfig);
+  });
+
+  it('should handle fetch errors', async () => {
+    (fetch as jest.Mock).mockResolvedValueOnce({
+      ok: false,
+      status: 500,
+      statusText: 'Internal Server Error',
+    });
+
+    await expect(getClientConfig()).rejects.toThrow(
+      'Failed to fetch client config: 500 Internal Server Error',
+    );
+  });
+
+  it('should handle network errors', async () => {
+    (fetch as jest.Mock).mockRejectedValueOnce(new Error('Network error'));
+
+    await expect(getClientConfig()).rejects.toThrow('Network error');
+  });
+});

packages/twenty-front/src/modules/client-config/utils/getClientConfig.ts

@@ -0,0 +1,21 @@
+import { REACT_APP_SERVER_BASE_URL } from '~/config';
+import { ClientConfig } from '~/generated/graphql';
+
+export const getClientConfig = async (): Promise<ClientConfig> => {
+  const response = await fetch(`${REACT_APP_SERVER_BASE_URL}/client-config`, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      `Failed to fetch client config: ${response.status} ${response.statusText}`,
+    );
+  }
+
+  const clientConfig: ClientConfig = await response.json();
+
+  return clientConfig;
+};