Fix update remote field metadata (#5638)

Closes #5610.

& update fetch-policy when fetching database on the remote databases
show page to get freshest status.

packages/twenty-front/src/modules/databases/hooks/useGetDatabaseConnection.ts

@@ -1,4 +1,4 @@
-import { useQuery } from '@apollo/client';
+import { useQuery, WatchQueryFetchPolicy } from '@apollo/client';
 
 import { GET_ONE_DATABASE_CONNECTION } from '@/databases/graphql/queries/findOneDatabaseConnection';
 import { getForeignDataWrapperType } from '@/databases/utils/getForeignDataWrapperType';
@@ -12,16 +12,20 @@ type UseGetDatabaseConnectionParams = {
   databaseKey: string;
   connectionId: string;
   skip?: boolean;
+  fetchPolicy?: WatchQueryFetchPolicy;
 };
 
 export const useGetDatabaseConnection = ({
   databaseKey,
   connectionId,
   skip,
+  fetchPolicy,
 }: UseGetDatabaseConnectionParams) => {
   const apolloMetadataClient = useApolloMetadataClient();
   const foreignDataWrapperType = getForeignDataWrapperType(databaseKey);
 
+  const fetchPolicyOption = fetchPolicy ? { fetchPolicy: fetchPolicy } : {};
+
   const { data, loading } = useQuery<
     GetOneDatabaseConnectionQuery,
     GetOneDatabaseConnectionQueryVariables
@@ -33,6 +37,7 @@ export const useGetDatabaseConnection = ({
         id: connectionId,
       },
     },
+    ...fetchPolicyOption,
   });
 
   const connection = data?.findOneRemoteServerById ?? null;

packages/twenty-front/src/modules/databases/hooks/useGetDatabaseConnectionTables.ts

@@ -1,4 +1,4 @@
-import { useQuery } from '@apollo/client';
+import { useQuery, WatchQueryFetchPolicy } from '@apollo/client';
 
 import { GET_MANY_REMOTE_TABLES } from '@/databases/graphql/queries/findManyRemoteTables';
 import { useApolloMetadataClient } from '@/object-metadata/hooks/useApolloMetadataClient';
@@ -11,15 +11,19 @@ type UseGetDatabaseConnectionTablesParams = {
   connectionId: string;
   skip?: boolean;
   shouldFetchPendingSchemaUpdates?: boolean;
+  fetchPolicy?: WatchQueryFetchPolicy;
 };
 
 export const useGetDatabaseConnectionTables = ({
   connectionId,
   skip,
   shouldFetchPendingSchemaUpdates,
+  fetchPolicy,
 }: UseGetDatabaseConnectionTablesParams) => {
   const apolloMetadataClient = useApolloMetadataClient();
 
+  const fetchPolicyOption = fetchPolicy ? { fetchPolicy: fetchPolicy } : {};
+
   const { data, error } = useQuery<
     GetManyRemoteTablesQuery,
     GetManyRemoteTablesQueryVariables
@@ -32,6 +36,7 @@ export const useGetDatabaseConnectionTables = ({
         shouldFetchPendingSchemaUpdates,
       },
     },
+    ...fetchPolicyOption,
   });
 
   return {

packages/twenty-front/src/modules/databases/hooks/useSyncRemoteTableSchemaChanges.ts

@@ -1,9 +1,12 @@
 import { useCallback } from 'react';
-import { ApolloClient, useMutation } from '@apollo/client';
+import { ApolloClient, useApolloClient, useMutation } from '@apollo/client';
 
 import { SYNC_REMOTE_TABLE_SCHEMA_CHANGES } from '@/databases/graphql/mutations/syncRemoteTableSchemaChanges';
 import { modifyRemoteTableFromCache } from '@/databases/utils/modifyRemoteTableFromCache';
 import { useApolloMetadataClient } from '@/object-metadata/hooks/useApolloMetadataClient';
+import { useFindManyObjectMetadataItems } from '@/object-metadata/hooks/useFindManyObjectMetadataItems';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useFindManyRecordsQuery } from '@/object-record/hooks/useFindManyRecordsQuery';
 import {
   RemoteTableInput,
   SyncRemoteTableSchemaChangesMutation,
@@ -13,6 +16,14 @@ import { isDefined } from '~/utils/isDefined';
 
 export const useSyncRemoteTableSchemaChanges = () => {
   const apolloMetadataClient = useApolloMetadataClient();
+  const apolloClient = useApolloClient();
+
+  const { refetch: refetchObjectMetadataItems } =
+    useFindManyObjectMetadataItems();
+
+  const { findManyRecordsQuery: findManyViewsQuery } = useFindManyRecordsQuery({
+    objectNameSingular: CoreObjectNameSingular.View,
+  });
 
   const [mutate, mutationInformation] = useMutation<
     SyncRemoteTableSchemaChangesMutation,
@@ -42,9 +53,16 @@ export const useSyncRemoteTableSchemaChanges = () => {
         },
       });
 
+      await refetchObjectMetadataItems();
+
+      await apolloClient.query({
+        query: findManyViewsQuery,
+        fetchPolicy: 'network-only',
+      });
+
       return remoteTable;
     },
-    [mutate],
+    [mutate, refetchObjectMetadataItems, findManyViewsQuery, apolloClient],
   );
 
   return {

packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionShowContainer.tsx

@@ -13,7 +13,7 @@ import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 export const SettingsIntegrationDatabaseConnectionShowContainer = () => {
   const navigate = useNavigate();
   const { connection, integration, databaseKey, tables } =
-    useDatabaseConnection();
+    useDatabaseConnection({ fetchPolicy: 'network-only' });
 
   const { deleteOneDatabaseConnection } = useDeleteOneDatabaseConnection();
 

packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationEditDatabaseConnectionContainer.tsx

@@ -3,7 +3,7 @@ import { useDatabaseConnection } from '@/settings/integrations/database-connecti
 
 export const SettingsIntegrationEditDatabaseConnectionContainer = () => {
   const { connection, integration, databaseKey, tables } =
-    useDatabaseConnection();
+    useDatabaseConnection({});
 
   if (!connection || !integration) return null;
 

packages/twenty-front/src/modules/settings/integrations/database-connection/hooks/useDatabaseConnection.ts

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
+import { WatchQueryFetchPolicy } from '@apollo/client';
 
 import { useGetDatabaseConnection } from '@/databases/hooks/useGetDatabaseConnection';
 import { useGetDatabaseConnectionTables } from '@/databases/hooks/useGetDatabaseConnectionTables';
@@ -7,7 +8,11 @@ import { useIsSettingsIntegrationEnabled } from '@/settings/integrations/hooks/u
 import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/useSettingsIntegrationCategories';
 import { AppPath } from '@/types/AppPath';
 
-export const useDatabaseConnection = () => {
+export const useDatabaseConnection = ({
+  fetchPolicy,
+}: {
+  fetchPolicy?: WatchQueryFetchPolicy;
+}) => {
   const { databaseKey = '', connectionId = '' } = useParams();
   const navigate = useNavigate();
 
@@ -24,6 +29,7 @@ export const useDatabaseConnection = () => {
     databaseKey,
     connectionId,
     skip: !isIntegrationAvailable,
+    fetchPolicy,
   });
 
   useEffect(() => {
@@ -43,6 +49,7 @@ export const useDatabaseConnection = () => {
     connectionId,
     skip: !connection,
     shouldFetchPendingSchemaUpdates: true,
+    fetchPolicy,
   });
 
   return { connection, integration, databaseKey, tables };