mirror of
https://github.com/twentyhq/twenty.git
synced 2024-12-25 13:02:15 +03:00
[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
This commit is contained in:
Marie
GitHub
parent
0d6fe7b2b4
commit
fe5b558477
@ -18,6 +18,7 @@ const documents = {
|
||||
"\n \n mutation createServer($input: CreateRemoteServerInput!) {\n createOneRemoteServer(input: $input) {\n ...RemoteServerFields\n }\n }\n": types.CreateServerDocument,
|
||||
"\n mutation deleteServer($input: RemoteServerIdInput!) {\n deleteOneRemoteServer(input: $input) {\n id\n }\n }\n": types.DeleteServerDocument,
|
||||
"\n \n mutation syncRemoteTable($input: RemoteTableInput!) {\n syncRemoteTable(input: $input) {\n ...RemoteTableFields\n }\n }\n": types.SyncRemoteTableDocument,
|
||||
"\n \n mutation syncRemoteTableSchemaChanges($input: RemoteTableInput!) {\n syncRemoteTableSchemaChanges(input: $input) {\n ...RemoteTableFields\n }\n }\n": types.SyncRemoteTableSchemaChangesDocument,
|
||||
"\n \n mutation unsyncRemoteTable($input: RemoteTableInput!) {\n unsyncRemoteTable(input: $input) {\n ...RemoteTableFields\n }\n }\n": types.UnsyncRemoteTableDocument,
|
||||
"\n \n mutation updateServer($input: UpdateRemoteServerInput!) {\n updateOneRemoteServer(input: $input) {\n ...RemoteServerFields\n }\n }\n": types.UpdateServerDocument,
|
||||
"\n \n query GetManyDatabaseConnections($input: RemoteServerTypeInput!) {\n findManyRemoteServersByType(input: $input) {\n ...RemoteServerFields\n }\n }\n": types.GetManyDatabaseConnectionsDocument,
|
||||
@ -68,6 +69,10 @@ export function graphql(source: "\n mutation deleteServer($input: RemoteServerI
|
||||
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
||||
*/
|
||||
export function graphql(source: "\n \n mutation syncRemoteTable($input: RemoteTableInput!) {\n syncRemoteTable(input: $input) {\n ...RemoteTableFields\n }\n }\n"): (typeof documents)["\n \n mutation syncRemoteTable($input: RemoteTableInput!) {\n syncRemoteTable(input: $input) {\n ...RemoteTableFields\n }\n }\n"];
|
||||
/**
|
||||
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
||||
*/
|
||||
export function graphql(source: "\n \n mutation syncRemoteTableSchemaChanges($input: RemoteTableInput!) {\n syncRemoteTableSchemaChanges(input: $input) {\n ...RemoteTableFields\n }\n }\n"): (typeof documents)["\n \n mutation syncRemoteTableSchemaChanges($input: RemoteTableInput!) {\n syncRemoteTableSchemaChanges(input: $input) {\n ...RemoteTableFields\n }\n }\n"];
|
||||
/**
|
||||
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
||||
*/
|
||||
|
||||
@ -368,6 +368,7 @@ export type LoginToken = {
|
||||
export type Mutation = {
|
||||
__typename?: 'Mutation';
|
||||
activateWorkspace: Workspace;
|
||||
addUserToWorkspace: User;
|
||||
authorizeApp: AuthorizeApp;
|
||||
challenge: LoginToken;
|
||||
checkoutSession: SessionEntity;
|
||||
@ -391,6 +392,7 @@ export type Mutation = {
|
||||
renewToken: AuthTokens;
|
||||
signUp: LoginToken;
|
||||
syncRemoteTable: RemoteTable;
|
||||
syncRemoteTableSchemaChanges: RemoteTable;
|
||||
track: Analytics;
|
||||
unsyncRemoteTable: RemoteTable;
|
||||
updateBillingSubscription: UpdateBillingEntity;
|
||||
@ -412,6 +414,11 @@ export type MutationActivateWorkspaceArgs = {
|
||||
};
|
||||
|
||||
|
||||
export type MutationAddUserToWorkspaceArgs = {
|
||||
inviteHash: Scalars['String']['input'];
|
||||
};
|
||||
|
||||
|
||||
export type MutationAuthorizeAppArgs = {
|
||||
clientId: Scalars['String']['input'];
|
||||
codeChallenge?: InputMaybe<Scalars['String']['input']>;
|
||||
@ -523,6 +530,11 @@ export type MutationSyncRemoteTableArgs = {
|
||||
};
|
||||
|
||||
|
||||
export type MutationSyncRemoteTableSchemaChangesArgs = {
|
||||
input: RemoteTableInput;
|
||||
};
|
||||
|
||||
|
||||
export type MutationTrackArgs = {
|
||||
data: Scalars['JSON']['input'];
|
||||
type: Scalars['String']['input'];
|
||||
@ -1284,6 +1296,13 @@ export type SyncRemoteTableMutationVariables = Exact<{
|
||||
|
||||
export type SyncRemoteTableMutation = { __typename?: 'Mutation', syncRemoteTable: { __typename?: 'RemoteTable', id?: any | null, name: string, schema?: string | null, status: RemoteTableStatus, schemaPendingUpdates?: Array<DistantTableUpdate> | null } };
|
||||
|
||||
export type SyncRemoteTableSchemaChangesMutationVariables = Exact<{
|
||||
input: RemoteTableInput;
|
||||
}>;
|
||||
|
||||
|
||||
export type SyncRemoteTableSchemaChangesMutation = { __typename?: 'Mutation', syncRemoteTableSchemaChanges: { __typename?: 'RemoteTable', id?: any | null, name: string, schema?: string | null, status: RemoteTableStatus, schemaPendingUpdates?: Array<DistantTableUpdate> | null } };
|
||||
|
||||
export type UnsyncRemoteTableMutationVariables = Exact<{
|
||||
input: RemoteTableInput;
|
||||
}>;
|
||||
@ -1390,6 +1409,7 @@ export const RemoteTableFieldsFragmentDoc = {"kind":"Document","definitions":[{"
|
||||
export const CreateServerDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"createServer"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"CreateRemoteServerInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createOneRemoteServer"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"RemoteServerFields"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"RemoteServerFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"RemoteServer"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"foreignDataWrapperId"}},{"kind":"Field","name":{"kind":"Name","value":"foreignDataWrapperOptions"}},{"kind":"Field","name":{"kind":"Name","value":"foreignDataWrapperType"}},{"kind":"Field","name":{"kind":"Name","value":"userMappingOptions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"user"}}]}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"schema"}}]}}]} as unknown as DocumentNode<CreateServerMutation, CreateServerMutationVariables>;
|
||||
export const DeleteServerDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"deleteServer"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"RemoteServerIdInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"deleteOneRemoteServer"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<DeleteServerMutation, DeleteServerMutationVariables>;
|
||||
export const SyncRemoteTableDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"syncRemoteTable"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"RemoteTableInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"syncRemoteTable"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"RemoteTableFields"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"RemoteTableFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"RemoteTable"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"schema"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"schemaPendingUpdates"}}]}}]} as unknown as DocumentNode<SyncRemoteTableMutation, SyncRemoteTableMutationVariables>;
|
||||
export const SyncRemoteTableSchemaChangesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"syncRemoteTableSchemaChanges"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"RemoteTableInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"syncRemoteTableSchemaChanges"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"RemoteTableFields"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"RemoteTableFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"RemoteTable"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"schema"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"schemaPendingUpdates"}}]}}]} as unknown as DocumentNode<SyncRemoteTableSchemaChangesMutation, SyncRemoteTableSchemaChangesMutationVariables>;
|
||||
export const UnsyncRemoteTableDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"unsyncRemoteTable"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"RemoteTableInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"unsyncRemoteTable"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"RemoteTableFields"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"RemoteTableFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"RemoteTable"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"schema"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"schemaPendingUpdates"}}]}}]} as unknown as DocumentNode<UnsyncRemoteTableMutation, UnsyncRemoteTableMutationVariables>;
|
||||
export const UpdateServerDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"updateServer"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UpdateRemoteServerInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateOneRemoteServer"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"RemoteServerFields"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"RemoteServerFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"RemoteServer"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"foreignDataWrapperId"}},{"kind":"Field","name":{"kind":"Name","value":"foreignDataWrapperOptions"}},{"kind":"Field","name":{"kind":"Name","value":"foreignDataWrapperType"}},{"kind":"Field","name":{"kind":"Name","value":"userMappingOptions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"user"}}]}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"schema"}}]}}]} as unknown as DocumentNode<UpdateServerMutation, UpdateServerMutationVariables>;
|
||||
export const GetManyDatabaseConnectionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetManyDatabaseConnections"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"RemoteServerTypeInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"findManyRemoteServersByType"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"RemoteServerFields"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"RemoteServerFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"RemoteServer"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"foreignDataWrapperId"}},{"kind":"Field","name":{"kind":"Name","value":"foreignDataWrapperOptions"}},{"kind":"Field","name":{"kind":"Name","value":"foreignDataWrapperType"}},{"kind":"Field","name":{"kind":"Name","value":"userMappingOptions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"user"}}]}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"schema"}}]}}]} as unknown as DocumentNode<GetManyDatabaseConnectionsQuery, GetManyDatabaseConnectionsQueryVariables>;
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
`;
|
||||
@ -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,
|
||||
|
||||
@ -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,
|
||||
};
|
||||
};
|
||||
@ -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();
|
||||
|
||||
@ -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,
|
||||
});
|
||||
};
|
||||
@ -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}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -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}
|
||||
/>
|
||||
|
||||
@ -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) => ({
|
||||
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
|
||||
|
||||
@ -303,7 +303,11 @@ export class RemoteTableService {
|
||||
if (isEmpty(distantTableColumns)) {
|
||||
await this.unsyncOne(workspaceId, remoteTable, remoteServer);
|
||||
|
||||
return {};
|
||||
return {
|
||||
name: remoteTable.localTableName,
|
||||
status: RemoteTableStatus.NOT_SYNCED,
|
||||
schemaPendingUpdates: [],
|
||||
};
|
||||
}
|
||||
|
||||
const foreignTableColumns = await fetchTableColumns(
|
||||
|
||||
@ -127,6 +127,7 @@ export {
|
||||
IconRelationManyToMany,
|
||||
IconRelationOneToMany,
|
||||
IconRelationOneToOne,
|
||||
IconReload,
|
||||
IconRepeat,
|
||||
IconRocket,
|
||||
IconSearch,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user