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

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

packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useRecoilValue } from 'recoil';
 
 import {
   setSessionId,
@@ -8,14 +8,12 @@ import {
 } from '@/analytics/hooks/useEventTracker';
 import { useRequestFreshCaptchaToken } from '@/captcha/hooks/useRequestFreshCaptchaToken';
 import { isCaptchaScriptLoadedState } from '@/captcha/states/isCaptchaScriptLoadedState';
-import { isAppWaitingForFreshObjectMetadataState } from '@/object-metadata/states/isAppWaitingForFreshObjectMetadataState';
 import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
 import { AppBasePath } from '@/types/AppBasePath';
 import { AppPath } from '@/types/AppPath';
 import { PageHotkeyScope } from '@/types/PageHotkeyScope';
 import { SettingsPath } from '@/types/SettingsPath';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
-import { useDebouncedCallback } from 'use-debounce';
 import { useCleanRecoilState } from '~/hooks/useCleanRecoilState';
 import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
 import { usePageChangeEffectNavigateLocation } from '~/hooks/usePageChangeEffectNavigateLocation';
@@ -52,27 +50,11 @@ export const PageChangeEffect = () => {
     }
   }, [location, previousLocation]);
 
-  const setIsAppWaitingForFreshObjectMetadata = useSetRecoilState(
-    isAppWaitingForFreshObjectMetadataState,
-  );
-
-  const setIsAppWaitingForFreshObjectMetadataDebounced = useDebouncedCallback(
-    () => {
-      setIsAppWaitingForFreshObjectMetadata(false);
-    },
-    100,
-  );
-
   useEffect(() => {
     if (isDefined(pageChangeEffectNavigateLocation)) {
       navigate(pageChangeEffectNavigateLocation);
-      setIsAppWaitingForFreshObjectMetadataDebounced();
     }
-  }, [
+  }, [navigate, pageChangeEffectNavigateLocation]);
-    navigate,
-    pageChangeEffectNavigateLocation,
-    setIsAppWaitingForFreshObjectMetadataDebounced,
-  ]);
 
   useEffect(() => {
     switch (true) {

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

@@ -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(
+  query ObjectMetadataItems($objectFilter: objectFilter, $fieldFilter: fieldFilter) {
-    $objectFilter: objectFilter
+    objects(paging: {first: 1000}, filter: $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 = {
+export const responseData = mockedStandardObjectMetadataQueryResult;
-  objects: { edges: [] },
-};

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

@@ -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,

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

@@ -1,6 +1,6 @@
 import { MockedProvider } from '@apollo/client/testing';
-import { act, renderHook } from '@testing-library/react';
+import { renderHook } from '@testing-library/react';
-import { ReactNode } from '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 }) => (

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

@@ -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 }) => (

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

@@ -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 }) => (

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

@@ -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({

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

@@ -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 {

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

@@ -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;
   };
 

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

@@ -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 {

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

@@ -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 {

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

@@ -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 {

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

@@ -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 {

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

@@ -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);
+        }
       },
     [],
   );

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

@@ -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);
         }
       },
     [],

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

@@ -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);
 

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

@@ -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 {

packages/twenty-front/src/modules/ui/input/components/internal/date/utils/__tests__/getHighlightedDates.test.ts

@@ -8,7 +8,7 @@ describe('getHighlightedDates', () => {
     expect(getHighlightedDates(dateRange)).toEqual([]);
   });
 
-  it('should should return empty if range is one day', () => {
+  it('should should return one day if range is one day', () => {
     const dateRange = {
       start: new Date('2024-10-12T00:00:00.000Z'),
       end: new Date('2024-10-12T00:00:00.000Z'),
@@ -18,7 +18,7 @@ describe('getHighlightedDates', () => {
     ]);
   });
 
-  it('should should return empty if range is 2 days', () => {
+  it('should should return two days if range is 2 days', () => {
     const dateRange = {
       start: new Date('2024-10-12T00:00:00.000Z'),
       end: new Date('2024-10-13T00:00:00.000Z'),
@@ -29,7 +29,7 @@ describe('getHighlightedDates', () => {
     ]);
   });
 
-  it('should should return empty if range is 10 days', () => {
+  it('should should return 10 days if range is 10 days', () => {
     const dateRange = {
       start: new Date('2024-10-12T00:00:00.000Z'),
       end: new Date('2024-10-21T00:00:00.000Z'),
@@ -47,4 +47,12 @@ describe('getHighlightedDates', () => {
       new Date('2024-10-21T00:00:00.000Z'),
     ]);
   });
+
+  it('should should return empty if range is 10 days but out of range', () => {
+    const dateRange = {
+      start: new Date('2023-10-01T00:00:00.000Z'),
+      end: new Date('2023-10-10T00:00:00.000Z'),
+    };
+    expect(getHighlightedDates(dateRange)).toEqual([]);
+  });
 });

packages/twenty-front/src/modules/ui/input/components/internal/date/utils/getHighlightedDates.ts

@@ -12,9 +12,11 @@ export const getHighlightedDates = (highlightedDateRange?: {
   const minDate = subMonths(currentDate, 2);
   const maxDate = addMonths(currentDate, 2);
 
-  let dateToHighlight = start < minDate ? minDate : start;
+  const startDate = start < minDate ? minDate : start;
   const lastDate = end > maxDate ? maxDate : end;
 
+  let dateToHighlight = new Date(startDate);
+
   while (dateToHighlight <= lastDate) {
     highlightedDates.push(dateToHighlight);
     dateToHighlight = addDays(dateToHighlight, 1);