admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Move settings data model refreshMetadata to sync calls (#9046)

Browse Source 
In this PR, I'm
- removing setting up the isAppWaitingForFreshMetadata boolean state in
PageChangeEffect navigate (not robust) to some precise synchronous
places, improving the control we have on when the app considers it's
ready to be rendered based on fresh metadata
- fixing tests
This commit is contained in:
Charles Bochet
2024-12-13 13:14:10 +01:00
committed by GitHub
parent b10d831371
commit 9579f22bc2
19 changed files with 204 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
packages/twenty-front/src/modules/object-metadata/hooks/__mocks__/useFindManyObjectMetadataItems.ts
View File

@ -1,11 +1,9 @@
import { gql } from '@apollo/client';
import { mockedStandardObjectMetadataQueryResult } from '~/testing/mock-data/generated/mock-metadata-query-result';
export const query = gql`
query ObjectMetadataItems(
$objectFilter: objectFilter
$fieldFilter: fieldFilter
) {
objects(paging: { first: 1000 }, filter: $objectFilter) {
query ObjectMetadataItems($objectFilter: objectFilter, $fieldFilter: fieldFilter) {
objects(paging: {first: 1000}, filter: $objectFilter) {
edges {
node {
id
@ -25,7 +23,32 @@ export const query = gql`
labelIdentifierFieldMetadataId
imageIdentifierFieldMetadataId
shortcut
fields(paging: { first: 1000 }, filter: $fieldFilter) {
isLabelSyncedWithName
indexMetadatas(paging: {first: 100}) {
edges {
node {
id
createdAt
updatedAt
name
indexWhereClause
indexType
isUnique
indexFieldMetadatas(paging: {first: 100}) {
edges {
node {
id
createdAt
updatedAt
order
fieldMetadataId
}
}
}
}
}
}
fields(paging: {first: 1000}, filter: $fieldFilter) {
edges {
node {
id
@ -38,8 +61,12 @@ export const query = gql`
isActive
isSystem
isNullable
isUnique
createdAt
updatedAt
defaultValue
options
settings
isLabelSyncedWithName
relationDefinition {
relationId
@ -63,8 +90,6 @@ export const query = gql`
name
}
}
defaultValue
options
}
}
pageInfo {
@ -88,6 +113,4 @@ export const query = gql`
export const variables = { objectFilter: undefined, fieldFilter: undefined };
export const responseData = {
objects: { edges: [] },
};
export const responseData = mockedStandardObjectMetadataQueryResult;

14
packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useCreateOneObjectMetadataItem.test.tsx
View File

@ -10,6 +10,11 @@ import {
variables,
} from '../__mocks__/useCreateOneObjectMetadataItem';
import {
query as findManyObjectMetadataItemsQuery,
responseData as findManyObjectMetadataItemsResponseData,
} from '../__mocks__/useFindManyObjectMetadataItems';
const mocks = [
{
request: {
@ -22,6 +27,15 @@ const mocks = [
},
})),
},
{
request: {
query: findManyObjectMetadataItemsQuery,
variables: {},
},
result: jest.fn(() => ({
data: findManyObjectMetadataItemsResponseData,
})),
},
{
request: {
query: findManyViewsQuery,

18
packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useCreateOneRelationMetadataItem.test.tsx
View File

@ -1,6 +1,6 @@
import { MockedProvider } from '@apollo/client/testing';
import { act, renderHook } from '@testing-library/react';
import { ReactNode } from 'react';
import { renderHook } from '@testing-library/react';
import { ReactNode, act } from 'react';
import { RecoilRoot } from 'recoil';
import { useCreateOneRelationMetadataItem } from '@/object-metadata/hooks/useCreateOneRelationMetadataItem';
@ -12,6 +12,11 @@ import {
variables,
} from '../__mocks__/useCreateOneRelationMetadataItem';
import {
query as findManyObjectMetadataItemsQuery,
responseData as findManyObjectMetadataItemsResponseData,
} from '../__mocks__/useFindManyObjectMetadataItems';
const mocks = [
{
request: {
@ -24,6 +29,15 @@ const mocks = [
},
})),
},
{
request: {
query: findManyObjectMetadataItemsQuery,
variables: {},
},
result: jest.fn(() => ({
data: findManyObjectMetadataItemsResponseData,
})),
},
];
const Wrapper = ({ children }: { children: ReactNode }) => (

16
packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useDeleteOneObjectMetadataItem.test.tsx
View File

@ -1,6 +1,6 @@
import { ReactNode } from 'react';
import { MockedProvider } from '@apollo/client/testing';
import { act, renderHook } from '@testing-library/react';
import { ReactNode } from 'react';
import { RecoilRoot } from 'recoil';
import { useDeleteOneObjectMetadataItem } from '@/object-metadata/hooks/useDeleteOneObjectMetadataItem';
@ -11,6 +11,11 @@ import {
variables,
} from '../__mocks__/useDeleteOneObjectMetadataItem';
import {
query as findManyObjectMetadataItemsQuery,
responseData as findManyObjectMetadataItemsResponseData,
} from '../__mocks__/useFindManyObjectMetadataItems';
const mocks = [
{
request: {
@ -23,6 +28,15 @@ const mocks = [
},
})),
},
{
request: {
query: findManyObjectMetadataItemsQuery,
variables: {},
},
result: jest.fn(() => ({
data: findManyObjectMetadataItemsResponseData,
})),
},
];
const Wrapper = ({ children }: { children: ReactNode }) => (

16
packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useDeleteOneRelationMetadataItem.test.tsx
View File

@ -1,6 +1,6 @@
import { ReactNode } from 'react';
import { MockedProvider } from '@apollo/client/testing';
import { act, renderHook } from '@testing-library/react';
import { ReactNode } from 'react';
import { RecoilRoot } from 'recoil';
import { useDeleteOneRelationMetadataItem } from '@/object-metadata/hooks/useDeleteOneRelationMetadataItem';
@ -11,6 +11,11 @@ import {
variables,
} from '../__mocks__/useDeleteOneRelationMetadataItem';
import {
query as findManyObjectMetadataItemsQuery,
responseData as findManyObjectMetadataItemsResponseData,
} from '../__mocks__/useFindManyObjectMetadataItems';
const mocks = [
{
request: {
@ -23,6 +28,15 @@ const mocks = [
},
})),
},
{
request: {
query: findManyObjectMetadataItemsQuery,
variables: {},
},
result: jest.fn(() => ({
data: findManyObjectMetadataItemsResponseData,
})),
},
];
const Wrapper = ({ children }: { children: ReactNode }) => (

14
packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useFieldMetadataItem.test.tsx
View File

@ -16,6 +16,11 @@ import {
variables,
} from '../__mocks__/useFieldMetadataItem';
import {
query as findManyObjectMetadataItemsQuery,
responseData as findManyObjectMetadataItemsResponseData,
} from '../__mocks__/useFindManyObjectMetadataItems';
const fieldMetadataItem: FieldMetadataItem = {
id: FIELD_METADATA_ID,
createdAt: '',
@ -157,6 +162,15 @@ const mocks = [
data: responseData.getCurrentUser,
})),
},
{
request: {
query: findManyObjectMetadataItemsQuery,
variables: {},
},
result: jest.fn(() => ({
data: findManyObjectMetadataItemsResponseData,
})),
},
];
const Wrapper = getJestMetadataAndApolloMocksWrapper({

13
packages/twenty-front/src/modules/object-metadata/hooks/useCreateOneFieldMetadataItem.ts
View File

@ -1,5 +1,4 @@
import { useMutation } from '@apollo/client';
import { getOperationName } from '@apollo/client/utilities';
import {
CreateFieldInput,
@ -8,12 +7,14 @@ import {
} from '~/generated-metadata/graphql';
import { CREATE_ONE_FIELD_METADATA_ITEM } from '../graphql/mutations';
import { FIND_MANY_OBJECT_METADATA_ITEMS } from '../graphql/queries';
import { useRefreshObjectMetadataItems } from '@/object-metadata/hooks/useRefreshObjectMetadataItem';
import { useApolloMetadataClient } from './useApolloMetadataClient';
export const useCreateOneFieldMetadataItem = () => {
const apolloMetadataClient = useApolloMetadataClient();
const { refreshObjectMetadataItems } =
useRefreshObjectMetadataItems('network-only');
const [mutate] = useMutation<
CreateOneFieldMetadataItemMutation,
@ -23,15 +24,17 @@ export const useCreateOneFieldMetadataItem = () => {
});
const createOneFieldMetadataItem = async (input: CreateFieldInput) => {
return await mutate({
const result = await mutate({
variables: {
input: {
field: input,
},
},
awaitRefetchQueries: true,
refetchQueries: [getOperationName(FIND_MANY_OBJECT_METADATA_ITEMS) ?? ''],
});
await refreshObjectMetadataItems();
return result;
};
return {

9
packages/twenty-front/src/modules/object-metadata/hooks/useCreateOneObjectMetadataItem.ts
View File

@ -1,5 +1,4 @@
import { useApolloClient, useMutation } from '@apollo/client';
import { getOperationName } from '@apollo/client/utilities';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useFindManyRecordsQuery } from '@/object-record/hooks/useFindManyRecordsQuery';
@ -10,13 +9,15 @@ import {
} from '~/generated-metadata/graphql';
import { CREATE_ONE_OBJECT_METADATA_ITEM } from '../graphql/mutations';
import { FIND_MANY_OBJECT_METADATA_ITEMS } from '../graphql/queries';
import { useRefreshObjectMetadataItems } from '@/object-metadata/hooks/useRefreshObjectMetadataItem';
import { useApolloMetadataClient } from './useApolloMetadataClient';
export const useCreateOneObjectMetadataItem = () => {
const apolloMetadataClient = useApolloMetadataClient();
const apolloClient = useApolloClient();
const { refreshObjectMetadataItems } =
useRefreshObjectMetadataItems('network-only');
const { findManyRecordsQuery } = useFindManyRecordsQuery({
objectNameSingular: CoreObjectNameSingular.View,
@ -34,10 +35,10 @@ export const useCreateOneObjectMetadataItem = () => {
variables: {
input: { object: input },
},
awaitRefetchQueries: true,
refetchQueries: [getOperationName(FIND_MANY_OBJECT_METADATA_ITEMS) ?? ''],
});
await refreshObjectMetadataItems();
return createdObjectMetadata;
};

14
packages/twenty-front/src/modules/object-metadata/hooks/useCreateOneRelationMetadataItem.ts
View File

@ -1,5 +1,4 @@
import { useMutation } from '@apollo/client';
import { getOperationName } from '@apollo/client/utilities';
import {
CreateOneRelationMetadataMutation,
@ -7,12 +6,12 @@ import {
} from '~/generated-metadata/graphql';
import { CREATE_ONE_RELATION_METADATA_ITEM } from '../graphql/mutations';
import { FIND_MANY_OBJECT_METADATA_ITEMS } from '../graphql/queries';
import {
formatRelationMetadataInput,
FormatRelationMetadataInputParams,
} from '../utils/formatRelationMetadataInput';
import { useRefreshObjectMetadataItems } from '@/object-metadata/hooks/useRefreshObjectMetadataItem';
import { useApolloMetadataClient } from './useApolloMetadataClient';
export const useCreateOneRelationMetadataItem = () => {
@ -25,14 +24,19 @@ export const useCreateOneRelationMetadataItem = () => {
client: apolloMetadataClient,
});
const { refreshObjectMetadataItems } =
useRefreshObjectMetadataItems('network-only');
const createOneRelationMetadataItem = async (
input: FormatRelationMetadataInputParams,
) => {
return await mutate({
const result = await mutate({
variables: { input: { relation: formatRelationMetadataInput(input) } },
awaitRefetchQueries: true,
refetchQueries: [getOperationName(FIND_MANY_OBJECT_METADATA_ITEMS) ?? ''],
});
await refreshObjectMetadataItems();
return result;
};
return {

14
packages/twenty-front/src/modules/object-metadata/hooks/useDeleteOneFieldMetadataItem.ts
View File

@ -1,5 +1,4 @@
import { useMutation } from '@apollo/client';
import { getOperationName } from '@apollo/client/utilities';
import {
DeleteOneFieldMetadataItemMutation,
@ -7,8 +6,8 @@ import {
} from '~/generated-metadata/graphql';
import { DELETE_ONE_FIELD_METADATA_ITEM } from '../graphql/mutations';
import { FIND_MANY_OBJECT_METADATA_ITEMS } from '../graphql/queries';
import { useRefreshObjectMetadataItems } from '@/object-metadata/hooks/useRefreshObjectMetadataItem';
import { useApolloMetadataClient } from './useApolloMetadataClient';
export const useDeleteOneFieldMetadataItem = () => {
@ -21,16 +20,21 @@ export const useDeleteOneFieldMetadataItem = () => {
client: apolloMetadataClient,
});
const { refreshObjectMetadataItems } =
useRefreshObjectMetadataItems('network-only');
const deleteOneFieldMetadataItem = async (
idToDelete: DeleteOneFieldMetadataItemMutationVariables['idToDelete'],
) => {
return await mutate({
const result = await mutate({
variables: {
idToDelete,
},
awaitRefetchQueries: true,
refetchQueries: [getOperationName(FIND_MANY_OBJECT_METADATA_ITEMS) ?? ''],
});
await refreshObjectMetadataItems();
return result;
};
return {

14
packages/twenty-front/src/modules/object-metadata/hooks/useDeleteOneObjectMetadataItem.ts
View File

@ -1,5 +1,4 @@
import { useMutation } from '@apollo/client';
import { getOperationName } from '@apollo/client/utilities';
import {
DeleteOneObjectMetadataItemMutation,
@ -7,8 +6,8 @@ import {
} from '~/generated-metadata/graphql';
import { DELETE_ONE_OBJECT_METADATA_ITEM } from '../graphql/mutations';
import { FIND_MANY_OBJECT_METADATA_ITEMS } from '../graphql/queries';
import { useRefreshObjectMetadataItems } from '@/object-metadata/hooks/useRefreshObjectMetadataItem';
import { useApolloMetadataClient } from './useApolloMetadataClient';
export const useDeleteOneObjectMetadataItem = () => {
@ -21,16 +20,21 @@ export const useDeleteOneObjectMetadataItem = () => {
client: apolloMetadataClient,
});
const { refreshObjectMetadataItems } =
useRefreshObjectMetadataItems('network-only');
const deleteOneObjectMetadataItem = async (
idToDelete: DeleteOneObjectMetadataItemMutationVariables['idToDelete'],
) => {
return await mutate({
const result = await mutate({
variables: {
idToDelete,
},
awaitRefetchQueries: true,
refetchQueries: [getOperationName(FIND_MANY_OBJECT_METADATA_ITEMS) ?? ''],
});
await refreshObjectMetadataItems();
return result;
};
return {

15
packages/twenty-front/src/modules/object-metadata/hooks/useDeleteOneRelationMetadataItem.ts
View File

@ -1,5 +1,4 @@
import { useMutation } from '@apollo/client';
import { getOperationName } from '@apollo/client/utilities';
import { DELETE_ONE_RELATION_METADATA_ITEM } from '@/object-metadata/graphql/mutations';
import {
@ -7,8 +6,7 @@ import {
DeleteOneRelationMetadataItemMutationVariables,
} from '~/generated-metadata/graphql';
import { FIND_MANY_OBJECT_METADATA_ITEMS } from '../graphql/queries';
import { useRefreshObjectMetadataItems } from '@/object-metadata/hooks/useRefreshObjectMetadataItem';
import { useApolloMetadataClient } from './useApolloMetadataClient';
export const useDeleteOneRelationMetadataItem = () => {
@ -21,16 +19,21 @@ export const useDeleteOneRelationMetadataItem = () => {
client: apolloMetadataClient,
});
const { refreshObjectMetadataItems } =
useRefreshObjectMetadataItems('network-only');
const deleteOneRelationMetadataItem = async (
idToDelete: DeleteOneRelationMetadataItemMutationVariables['idToDelete'],
) => {
return await mutate({
const result = await mutate({
variables: {
idToDelete,
},
awaitRefetchQueries: true,
refetchQueries: [getOperationName(FIND_MANY_OBJECT_METADATA_ITEMS) ?? ''],
});
await refreshObjectMetadataItems();
return result;
};
return {

9
packages/twenty-front/src/modules/object-metadata/hooks/useLoadMockedObjectMetadataItems.ts
View File

@ -1,3 +1,4 @@
import { isAppWaitingForFreshObjectMetadataState } from '@/object-metadata/states/isAppWaitingForFreshObjectMetadataState';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { useRecoilCallback } from 'recoil';
import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
@ -15,6 +16,14 @@ export const useLoadMockedObjectMetadataItems = () => {
) {
set(objectMetadataItemsState, generatedMockObjectMetadataItems);
}
if (
snapshot
.getLoadable(isAppWaitingForFreshObjectMetadataState)
.getValue() === true
) {
set(isAppWaitingForFreshObjectMetadataState, false);
}
},
[],
);

9
packages/twenty-front/src/modules/object-metadata/hooks/useRefreshObjectMetadataItem.ts
View File

@ -1,5 +1,6 @@
import { FIND_MANY_OBJECT_METADATA_ITEMS } from '@/object-metadata/graphql/queries';
import { useApolloMetadataClient } from '@/object-metadata/hooks/useApolloMetadataClient';
import { isAppWaitingForFreshObjectMetadataState } from '@/object-metadata/states/isAppWaitingForFreshObjectMetadataState';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { mapPaginatedObjectMetadataItemsToObjectMetadataItems } from '@/object-metadata/utils/mapPaginatedObjectMetadataItemsToObjectMetadataItems';
@ -7,13 +8,18 @@ import { useRecoilCallback } from 'recoil';
import { ObjectMetadataItemsQuery } from '~/generated-metadata/graphql';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
export const useRefreshObjectMetadataItems = () => {
type FetchPolicy = 'network-only' | 'cache-first';
export const useRefreshObjectMetadataItems = (
fetchPolicy: FetchPolicy = 'cache-first',
) => {
const client = useApolloMetadataClient();
const refreshObjectMetadataItems = async () => {
const result = await client.query<ObjectMetadataItemsQuery>({
query: FIND_MANY_OBJECT_METADATA_ITEMS,
variables: {},
fetchPolicy,
});
const objectMetadataItems =
@ -34,6 +40,7 @@ export const useRefreshObjectMetadataItems = () => {
)
) {
set(objectMetadataItemsState, toSetObjectMetadataItems);
set(isAppWaitingForFreshObjectMetadataState, false);
}
},
[],

9
packages/twenty-front/src/modules/object-metadata/hooks/useUpdateOneFieldMetadataItem.ts
View File

@ -1,5 +1,4 @@
import { useApolloClient, useMutation } from '@apollo/client';
import { getOperationName } from '@apollo/client/utilities';
import {
UpdateOneFieldMetadataItemMutation,
@ -7,9 +6,9 @@ import {
} from '~/generated-metadata/graphql';
import { UPDATE_ONE_FIELD_METADATA_ITEM } from '../graphql/mutations';
import { FIND_MANY_OBJECT_METADATA_ITEMS } from '../graphql/queries';
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
import { useRefreshObjectMetadataItems } from '@/object-metadata/hooks/useRefreshObjectMetadataItem';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useFindManyRecordsQuery } from '@/object-record/hooks/useFindManyRecordsQuery';
import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
@ -19,6 +18,8 @@ import { useApolloMetadataClient } from './useApolloMetadataClient';
export const useUpdateOneFieldMetadataItem = () => {
const apolloMetadataClient = useApolloMetadataClient();
const apolloClient = useApolloClient();
const { refreshObjectMetadataItems } =
useRefreshObjectMetadataItems('network-only');
const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
@ -67,10 +68,10 @@ export const useUpdateOneFieldMetadataItem = () => {
idToUpdate: fieldMetadataIdToUpdate,
updatePayload: updatePayload,
},
awaitRefetchQueries: true,
refetchQueries: [getOperationName(FIND_MANY_OBJECT_METADATA_ITEMS) ?? ''],
});
await refreshObjectMetadataItems();
const { data } = await apolloClient.query({ query: GET_CURRENT_USER });
setCurrentWorkspace(data?.currentUser?.defaultWorkspace);

14
packages/twenty-front/src/modules/object-metadata/hooks/useUpdateOneObjectMetadataItem.ts
View File

@ -1,5 +1,4 @@
import { useMutation } from '@apollo/client';
import { getOperationName } from '@apollo/client/utilities';
import {
UpdateOneObjectInput,
@ -8,8 +7,8 @@ import {
} from '~/generated-metadata/graphql';
import { UPDATE_ONE_OBJECT_METADATA_ITEM } from '../graphql/mutations';
import { FIND_MANY_OBJECT_METADATA_ITEMS } from '../graphql/queries';
import { useRefreshObjectMetadataItems } from '@/object-metadata/hooks/useRefreshObjectMetadataItem';
import { useApolloMetadataClient } from './useApolloMetadataClient';
// TODO: Slice the Apollo store synchronously in the update function instead of subscribing, so we can use update after read in the same function call
@ -23,6 +22,9 @@ export const useUpdateOneObjectMetadataItem = () => {
client: apolloClientMetadata ?? undefined,
});
const { refreshObjectMetadataItems } =
useRefreshObjectMetadataItems('network-only');
const updateOneObjectMetadataItem = async ({
idToUpdate,
updatePayload,
@ -30,14 +32,16 @@ export const useUpdateOneObjectMetadataItem = () => {
idToUpdate: UpdateOneObjectInput['id'];
updatePayload: UpdateOneObjectInput['update'];
}) => {
return await mutate({
const result = await mutate({
variables: {
idToUpdate,
updatePayload,
},
awaitRefetchQueries: true,
refetchQueries: [getOperationName(FIND_MANY_OBJECT_METADATA_ITEMS) ?? ''],
});
await refreshObjectMetadataItems();
return result;
};
return {