[FE] Update remote table schema + refactor Tables list (#5548)

Closes #5062. Refactoring tables list to avoid rendering all toggles on each sync or schema update while using fresh data: - introducing id for RemoteTables in apollo cache - manually updating the cache for the record that was updated after a sync or schema update instead of fetching all tables again
2024-05-23 17:00:24 +02:00
parent 0d6fe7b2b4
commit fe5b558477
13 changed files with 222 additions and 57 deletions
--- a/packages/twenty-front/src/modules/apollo/hooks/useApolloFactory.ts
+++ b/packages/twenty-front/src/modules/apollo/hooks/useApolloFactory.ts
@ -30,7 +30,13 @@ export const useApolloFactory = (options: Partial<Options<any>> = {}) => {
  const apolloClient = useMemo(() => {
    apolloRef.current = new ApolloFactory({
      uri: `${REACT_APP_SERVER_BASE_URL}/graphql`,
-      cache: new InMemoryCache(),
+      cache: new InMemoryCache({
+        typePolicies: {
+          RemoteTable: {
+            keyFields: ['name'],
+          },
+        },
+      }),
      headers: {
        ...(currentWorkspace?.currentCacheVersion && {
          'X-Schema-Version': currentWorkspace.currentCacheVersion,
--- a/packages/twenty-front/src/modules/databases/graphql/mutations/syncRemoteTableSchemaChanges.ts
+++ b/packages/twenty-front/src/modules/databases/graphql/mutations/syncRemoteTableSchemaChanges.ts
@ -0,0 +1,12 @@
+import { gql } from '@apollo/client';
+
+import { REMOTE_TABLE_FRAGMENT } from '@/databases/graphql/fragments/remoteTableFragment';
+
+export const SYNC_REMOTE_TABLE_SCHEMA_CHANGES = gql`
+  ${REMOTE_TABLE_FRAGMENT}
+  mutation syncRemoteTableSchemaChanges($input: RemoteTableInput!) {
+    syncRemoteTableSchemaChanges(input: $input) {
+      ...RemoteTableFields
+    }
+  }
+`;
--- a/packages/twenty-front/src/modules/databases/hooks/useSyncRemoteTable.ts
+++ b/packages/twenty-front/src/modules/databases/hooks/useSyncRemoteTable.ts
@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import { ApolloClient, useApolloClient, useMutation } from '@apollo/client';

 import { SYNC_REMOTE_TABLE } from '@/databases/graphql/mutations/syncRemoteTable';
-import { GET_MANY_REMOTE_TABLES } from '@/databases/graphql/queries/findManyRemoteTables';
+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';
@ -12,6 +12,7 @@ import {
  SyncRemoteTableMutation,
  SyncRemoteTableMutationVariables,
 } from '~/generated-metadata/graphql';
+import { isDefined } from '~/utils/isDefined';

 export const useSyncRemoteTable = () => {
  const apolloMetadataClient = useApolloMetadataClient();
@ -23,7 +24,6 @@ export const useSyncRemoteTable = () => {
  const { findManyRecordsQuery: findManyViewsQuery } = useFindManyRecordsQuery({
    objectNameSingular: CoreObjectNameSingular.View,
  });
-
  const [mutate] = useMutation<
    SyncRemoteTableMutation,
    SyncRemoteTableMutationVariables
@ -37,20 +37,19 @@ export const useSyncRemoteTable = () => {
        variables: {
          input,
        },
-        awaitRefetchQueries: true,
-        refetchQueries: [
-          {
-            query: GET_MANY_REMOTE_TABLES,
-            variables: {
-              input: {
-                id: input.remoteServerId,
+        update: (cache, { data }) => {
+          if (isDefined(data)) {
+            modifyRemoteTableFromCache({
+              cache: cache,
+              remoteTableName: input.name,
+              fieldModifiers: {
+                status: () => data.syncRemoteTable.status,
              },
-            },
-          },
-        ],
+            });
+          }
+        },
      });

-      // TODO: we should return the tables with the columns and store in cache instead of refetching
      await refetchObjectMetadataItems();
      await apolloClient.query({
        query: findManyViewsQuery,
--- a/packages/twenty-front/src/modules/databases/hooks/useSyncRemoteTableSchemaChanges.ts
+++ b/packages/twenty-front/src/modules/databases/hooks/useSyncRemoteTableSchemaChanges.ts
@ -0,0 +1,53 @@
+import { useCallback } from 'react';
+import { ApolloClient, 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 {
+  RemoteTableInput,
+  SyncRemoteTableSchemaChangesMutation,
+  SyncRemoteTableSchemaChangesMutationVariables,
+} from '~/generated-metadata/graphql';
+import { isDefined } from '~/utils/isDefined';
+
+export const useSyncRemoteTableSchemaChanges = () => {
+  const apolloMetadataClient = useApolloMetadataClient();
+
+  const [mutate, mutationInformation] = useMutation<
+    SyncRemoteTableSchemaChangesMutation,
+    SyncRemoteTableSchemaChangesMutationVariables
+  >(SYNC_REMOTE_TABLE_SCHEMA_CHANGES, {
+    client: apolloMetadataClient ?? ({} as ApolloClient<any>),
+  });
+
+  const syncRemoteTableSchemaChanges = useCallback(
+    async (input: RemoteTableInput) => {
+      const remoteTable = await mutate({
+        variables: {
+          input,
+        },
+        update: (cache, { data }) => {
+          if (isDefined(data)) {
+            modifyRemoteTableFromCache({
+              cache: cache,
+              remoteTableName: input.name,
+              fieldModifiers: {
+                schemaPendingUpdates: () =>
+                  data.syncRemoteTableSchemaChanges.schemaPendingUpdates || [],
+              },
+            });
+          }
+        },
+      });
+
+      return remoteTable;
+    },
+    [mutate],
+  );
+
+  return {
+    syncRemoteTableSchemaChanges,
+    isLoading: mutationInformation.loading,
+  };
+};
--- a/packages/twenty-front/src/modules/databases/hooks/useUnsyncRemoteTable.ts
+++ b/packages/twenty-front/src/modules/databases/hooks/useUnsyncRemoteTable.ts
@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import { ApolloClient, useMutation } from '@apollo/client';

 import { UNSYNC_REMOTE_TABLE } from '@/databases/graphql/mutations/unsyncRemoteTable';
-import { GET_MANY_REMOTE_TABLES } from '@/databases/graphql/queries/findManyRemoteTables';
+import { modifyRemoteTableFromCache } from '@/databases/utils/modifyRemoteTableFromCache';
 import { useApolloMetadataClient } from '@/object-metadata/hooks/useApolloMetadataClient';
 import { useFindManyObjectMetadataItems } from '@/object-metadata/hooks/useFindManyObjectMetadataItems';
 import {
@ -10,6 +10,7 @@ import {
  UnsyncRemoteTableMutation,
  UnsyncRemoteTableMutationVariables,
 } from '~/generated-metadata/graphql';
+import { isDefined } from '~/utils/isDefined';

 export const useUnsyncRemoteTable = () => {
  const apolloMetadataClient = useApolloMetadataClient();
@ -29,17 +30,17 @@ export const useUnsyncRemoteTable = () => {
        variables: {
          input,
        },
-        awaitRefetchQueries: true,
-        refetchQueries: [
-          {
-            query: GET_MANY_REMOTE_TABLES,
-            variables: {
-              input: {
-                id: input.remoteServerId,
+        update: (cache, { data }) => {
+          if (isDefined(data)) {
+            modifyRemoteTableFromCache({
+              cache: cache,
+              remoteTableName: input.name,
+              fieldModifiers: {
+                status: () => data.unsyncRemoteTable.status,
              },
-            },
-          },
-        ],
+            });
+          }
+        },
      });

      await refetchObjectMetadataItems();
--- a/packages/twenty-front/src/modules/databases/utils/modifyRemoteTableFromCache.ts
+++ b/packages/twenty-front/src/modules/databases/utils/modifyRemoteTableFromCache.ts
@ -0,0 +1,22 @@
+import { ApolloCache } from '@apollo/client';
+import { Modifiers } from '@apollo/client/cache';
+
+import { RemoteTable } from '~/generated-metadata/graphql';
+
+export const modifyRemoteTableFromCache = ({
+  cache,
+  fieldModifiers,
+  remoteTableName,
+}: {
+  cache: ApolloCache<object>;
+  fieldModifiers: Modifiers<RemoteTable>;
+  remoteTableName: string;
+}) => {
+  const remoteTableCacheId = `RemoteTable:{"name":"${remoteTableName}"}`;
+
+  cache.modify({
+    id: remoteTableCacheId,
+    fields: fieldModifiers,
+    optimistic: true,
+  });
+};
--- a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationRemoteTableSchemaUpdate.tsx
+++ b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationRemoteTableSchemaUpdate.tsx
@ -0,0 +1,37 @@
+import { FetchResult } from '@apollo/client';
+import styled from '@emotion/styled';
+import { IconReload } from 'twenty-ui';
+
+import { Button } from '@/ui/input/button/components/Button';
+import { SyncRemoteTableSchemaChangesMutation } from '~/generated-metadata/graphql';
+
+const StyledText = styled.h3`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  margin: 0;
+`;
+
+type SettingsIntegrationRemoteTableSchemaUpdateProps = {
+  updatesText: string;
+  onUpdate: () => Promise<FetchResult<SyncRemoteTableSchemaChangesMutation>>;
+};
+
+export const SettingsIntegrationRemoteTableSchemaUpdate = ({
+  updatesText,
+  onUpdate,
+}: SettingsIntegrationRemoteTableSchemaUpdateProps) => {
+  return (
+    <>
+      {updatesText && <StyledText>{updatesText}</StyledText>}
+      {updatesText && (
+        <Button
+          Icon={IconReload}
+          title="Update"
+          size="small"
+          onClick={onUpdate}
+        />
+      )}
+    </>
+  );
+};
--- a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationRemoteTableSyncStatusToggle.tsx
+++ b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationRemoteTableSyncStatusToggle.tsx
@ -4,10 +4,12 @@ import { Toggle } from '@/ui/input/components/Toggle';
 import { RemoteTableStatus } from '~/generated-metadata/graphql';

 export const SettingsIntegrationRemoteTableSyncStatusToggle = ({
-  table,
+  tableName,
+  tableStatus,
  onSyncUpdate,
 }: {
-  table: { id: string; name: string; status: RemoteTableStatus };
+  tableName: string;
+  tableStatus: RemoteTableStatus;
  onSyncUpdate: (value: boolean, tableName: string) => Promise<void>;
 }) => {
  const [isToggleLoading, setIsToggleLoading] = useState(false);
@ -15,13 +17,13 @@ export const SettingsIntegrationRemoteTableSyncStatusToggle = ({
  const onChange = async (newValue: boolean) => {
    if (isToggleLoading) return;
    setIsToggleLoading(true);
-    await onSyncUpdate(newValue, table.name);
+    await onSyncUpdate(newValue, tableName);
    setIsToggleLoading(false);
  };

  return (
    <Toggle
-      value={table.status === RemoteTableStatus.Synced}
+      value={tableStatus === RemoteTableStatus.Synced}
      disabled={isToggleLoading}
      onChange={onChange}
    />
--- a/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseTablesListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseTablesListCard.tsx
@ -1,17 +1,18 @@
-import { useCallback, useState } from 'react';
+import { useCallback } from 'react';
 import styled from '@emotion/styled';
 import { z } from 'zod';

 import { useSyncRemoteTable } from '@/databases/hooks/useSyncRemoteTable';
+import { useSyncRemoteTableSchemaChanges } from '@/databases/hooks/useSyncRemoteTableSchemaChanges';
 import { useUnsyncRemoteTable } from '@/databases/hooks/useUnsyncRemoteTable';
 import { SettingsListCard } from '@/settings/components/SettingsListCard';
+import { SettingsIntegrationRemoteTableSchemaUpdate } from '@/settings/integrations/components/SettingsIntegrationRemoteTableSchemaUpdate';
 import { SettingsIntegrationRemoteTableSyncStatusToggle } from '@/settings/integrations/components/SettingsIntegrationRemoteTableSyncStatusToggle';
 import {
  DistantTableUpdate,
  RemoteTable,
  RemoteTableStatus,
 } from '~/generated-metadata/graphql';
-import { isDefined } from '~/utils/isDefined';

 export const settingsIntegrationsDatabaseTablesSchema = z.object({
  syncedTablesByName: z.record(z.boolean()),
@ -32,13 +33,6 @@ const StyledRowRightContainer = styled.div`
  gap: ${({ theme }) => theme.spacing(1)};
 `;

-const StyledText = styled.h3`
-  color: ${({ theme }) => theme.font.color.tertiary};
-  font-size: ${({ theme }) => theme.font.size.md};
-  font-weight: ${({ theme }) => theme.font.weight.regular};
-  margin: 0;
-`;
-
 const getDistantTableUpdatesText = (
  schemaPendingUpdates: DistantTableUpdate[],
 ) => {
@ -66,24 +60,18 @@ export const SettingsIntegrationDatabaseTablesListCard = ({
 }: SettingsIntegrationDatabaseTablesListCardProps) => {
  const { syncRemoteTable } = useSyncRemoteTable();
  const { unsyncRemoteTable } = useUnsyncRemoteTable();
+  const { syncRemoteTableSchemaChanges } = useSyncRemoteTableSchemaChanges();

-  // We need to use a state because the table status update re-render the whole list of toggles
-  const [items] = useState(
-    tables.map((table) => ({
-      ...table,
-      id: table.name,
-      updatesText: table.schemaPendingUpdates
-        ? getDistantTableUpdatesText(table.schemaPendingUpdates)
-        : null,
-    })),
-  );
+  const items = tables.map((table) => ({
+    ...table,
+    id: table.name,
+    updatesText: table.schemaPendingUpdates
+      ? getDistantTableUpdatesText(table.schemaPendingUpdates)
+      : null,
+  }));

  const onSyncUpdate = useCallback(
    async (isSynced: boolean, tableName: string) => {
-      const table = items.find((table) => table.name === tableName);
-
-      if (!isDefined(table)) return;
-
      if (isSynced) {
        await syncRemoteTable({
          remoteServerId: connectionId,
@ -96,7 +84,16 @@ export const SettingsIntegrationDatabaseTablesListCard = ({
        });
      }
    },
-    [items, syncRemoteTable, connectionId, unsyncRemoteTable],
+    [syncRemoteTable, connectionId, unsyncRemoteTable],
+  );
+
+  const onSyncSchemaUpdate = useCallback(
+    async (tableName: string) =>
+      syncRemoteTableSchemaChanges({
+        remoteServerId: connectionId,
+        name: tableName,
+      }),
+    [syncRemoteTableSchemaChanges, connectionId],
  );

  const rowRightComponent = useCallback(
@ -111,14 +108,20 @@ export const SettingsIntegrationDatabaseTablesListCard = ({
      };
    }) => (
      <StyledRowRightContainer>
-        {item.updatesText && <StyledText>{item.updatesText}</StyledText>}
+        {item.updatesText && (
+          <SettingsIntegrationRemoteTableSchemaUpdate
+            updatesText={item.updatesText}
+            onUpdate={() => onSyncSchemaUpdate(item.name)}
+          />
+        )}
        <SettingsIntegrationRemoteTableSyncStatusToggle
-          table={item}
+          tableName={item.name}
+          tableStatus={item.status}
          onSyncUpdate={onSyncUpdate}
        />
      </StyledRowRightContainer>
    ),
-    [onSyncUpdate],
+    [onSyncSchemaUpdate, onSyncUpdate],
  );
  return (
    <SettingsListCard