Refactor Views by cleaning the code, relying on apolloCache and improving performances (#4516)

* Wip refactoring view

* Post merge conflicts

* Fix review

* Add create view capability

* Fix create object missing view

* Fix tests

package.json

@@ -108,6 +108,7 @@
     "libphonenumber-js": "^1.10.26",
     "lodash.camelcase": "^4.3.0",
     "lodash.debounce": "^4.0.8",
+    "lodash.groupby": "^4.6.0",
     "lodash.isempty": "^4.4.0",
     "lodash.isequal": "^4.5.0",
     "lodash.isobject": "^3.0.2",

packages/twenty-front/src/App.tsx

@@ -47,7 +47,7 @@ import { SettingsWorkspaceMembers } from '~/pages/settings/SettingsWorkspaceMemb
 import { Tasks } from '~/pages/tasks/Tasks';
 
 export const App = () => {
-  const billing = useRecoilValue(billingState());
+  const billing = useRecoilValue(billingState);
 
   return (
     <>

packages/twenty-front/src/effect-components/CommandMenuEffect.tsx

@@ -5,7 +5,7 @@ import { COMMAND_MENU_COMMANDS } from '@/command-menu/constants/CommandMenuComma
 import { commandMenuCommandsState } from '@/command-menu/states/commandMenuCommandsState';
 
 export const CommandMenuEffect = () => {
-  const setCommands = useSetRecoilState(commandMenuCommandsState());
+  const setCommands = useSetRecoilState(commandMenuCommandsState);
 
   const commands = COMMAND_MENU_COMMANDS;
   useEffect(() => {

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

@@ -45,7 +45,7 @@ export const PageChangeEffect = () => {
 
   const openCreateActivity = useOpenCreateActivityDrawer();
 
-  const isSignUpDisabled = useRecoilValue(isSignUpDisabledState());
+  const isSignUpDisabled = useRecoilValue(isSignUpDisabledState);
 
   useEffect(() => {
     if (!previousLocation || previousLocation !== location.pathname) {

packages/twenty-front/src/hooks/useDefaultHomePagePath.tsx

@@ -13,7 +13,7 @@ export const useDefaultHomePagePath = () => {
 
   const companyViewId = records.find(
     (view: any) => view?.objectMetadataId === companyObjectMetadataItem.id,
-  )?.node.id;
+  )?.id;
   const defaultHomePagePath =
     '/objects/companies' + (companyViewId ? `?view=${companyViewId}` : '');
 

packages/twenty-front/src/index.tsx

@@ -2,6 +2,7 @@ import { StrictMode } from 'react';
 import ReactDOM from 'react-dom/client';
 import { HelmetProvider } from 'react-helmet-async';
 import { BrowserRouter } from 'react-router-dom';
+import { loadDevMessages, loadErrorMessages } from '@apollo/client/dev';
 import { RecoilRoot } from 'recoil';
 
 import { ApolloProvider } from '@/apollo/components/ApolloProvider';
@@ -33,6 +34,10 @@ import 'react-loading-skeleton/dist/skeleton.css';
 
 const root = ReactDOM.createRoot(document.getElementById('root')!);
 
+// Adds messages only in a dev environment
+loadDevMessages();
+loadErrorMessages();
+
 root.render(
   <RecoilRoot>
     <AppErrorBoundary>

packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx

@@ -102,7 +102,7 @@ export const CalendarEventRow = ({
   className,
 }: CalendarEventRowProps) => {
   const theme = useTheme();
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
   const { displayCurrentEventCursor = false } = useContext(CalendarContext);
   const { openCalendarEventRightDrawer } = useOpenCalendarEventRightDrawer();
 

packages/twenty-front/src/modules/activities/calendar/right-drawer/components/RightDrawerCalendarEvent.tsx

@@ -9,10 +9,10 @@ import { useSetRecordInStore } from '@/object-record/record-store/hooks/useSetRe
 
 export const RightDrawerCalendarEvent = () => {
   const { setRecords } = useSetRecordInStore();
-  const calendarEventId = useRecoilValue(viewableCalendarEventIdState());
+  const viewableCalendarEventId = useRecoilValue(viewableCalendarEventIdState);
   const { record: calendarEvent } = useFindOneRecord<CalendarEvent>({
     objectNameSingular: CoreObjectNameSingular.CalendarEvent,
-    objectRecordId: calendarEventId ?? '',
+    objectRecordId: viewableCalendarEventId ?? '',
     onCompleted: (record) => setRecords([record]),
   });
 

packages/twenty-front/src/modules/activities/calendar/right-drawer/hooks/__tests__/useOpenCalendarEventRightDrawer.test.tsx

@@ -9,9 +9,9 @@ describe('useOpenCalendarEventRightDrawer', () => {
   it('opens the right drawer with the calendar event', () => {
     const { result } = renderHook(
       () => {
-        const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState());
+        const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState);
         const viewableCalendarEventId = useRecoilValue(
-          viewableCalendarEventIdState(),
+          viewableCalendarEventIdState,
         );
         return {
           ...useOpenCalendarEventRightDrawer(),

packages/twenty-front/src/modules/activities/calendar/right-drawer/hooks/useOpenCalendarEventRightDrawer.ts

@@ -10,7 +10,7 @@ export const useOpenCalendarEventRightDrawer = () => {
   const { openRightDrawer } = useRightDrawer();
   const setHotkeyScope = useSetHotkeyScope();
   const setViewableCalendarEventId = useSetRecoilState(
-    viewableCalendarEventIdState(),
+    viewableCalendarEventIdState,
   );
 
   const openCalendarEventRightDrawer = (calendarEventId: string) => {

packages/twenty-front/src/modules/activities/comment/__stories__/Comment.stories.tsx

@@ -11,7 +11,7 @@ import { Comment } from '../Comment';
 import { mockComment, mockCommentWithLongValues } from './mock-comment';
 
 const CommentSetterEffect = () => {
-  const setViewableActivity = useSetRecoilState(viewableActivityIdState());
+  const setViewableActivity = useSetRecoilState(viewableActivityIdState);
 
   useEffect(() => {
     setViewableActivity('test-id');

packages/twenty-front/src/modules/activities/comment/__stories__/CommentHeader.stories.tsx

@@ -13,7 +13,7 @@ import { CommentHeader } from '../CommentHeader';
 import { mockComment, mockCommentWithLongValues } from './mock-comment';
 
 const CommentHeaderSetterEffect = () => {
-  const setViewableActivity = useSetRecoilState(viewableActivityIdState());
+  const setViewableActivity = useSetRecoilState(viewableActivityIdState);
 
   useEffect(() => {
     setViewableActivity('test-id');

packages/twenty-front/src/modules/activities/components/ActivityBodyEditor.tsx

@@ -116,7 +116,7 @@ export const ActivityBodyEditor = ({
   );
 
   const [canCreateActivity, setCanCreateActivity] = useRecoilState(
-    canCreateActivityState(),
+    canCreateActivityState,
   );
 
   const [uploadFile] = useUploadFileMutation();
@@ -339,7 +339,7 @@ export const ActivityBodyEditor = ({
       if (
         isDefined(currentBlockContent) &&
         isArray(currentBlockContent) &&
-        currentBlockContent[0] &&
+        isDefined(currentBlockContent[0]) &&
         currentBlockContent[0].type === 'text'
       ) {
         // Text block case

packages/twenty-front/src/modules/activities/components/ActivityComments.tsx

@@ -61,7 +61,7 @@ export const ActivityComments = ({
     objectNameSingular: CoreObjectNameSingular.Comment,
   });
 
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
 
   const { records: comments } = useFindManyRecords({
     objectNameSingular: CoreObjectNameSingular.Comment,

packages/twenty-front/src/modules/activities/components/ActivityEditorEffect.tsx

@@ -29,15 +29,15 @@ export const ActivityEditorEffect = ({
     ({ snapshot, set }) =>
       () => {
         const isUpsertingActivityInDB = snapshot
-          .getLoadable(isUpsertingActivityInDBState())
+          .getLoadable(isUpsertingActivityInDBState)
           .getValue();
 
         const canCreateActivity = snapshot
-          .getLoadable(canCreateActivityState())
+          .getLoadable(canCreateActivityState)
           .getValue();
 
         const isActivityInCreateMode = snapshot
-          .getLoadable(isActivityInCreateModeState())
+          .getLoadable(isActivityInCreateModeState)
           .getValue();
 
         const activityFromStore = snapshot
@@ -71,7 +71,7 @@ export const ActivityEditorEffect = ({
             deleteActivityFromCache(activity);
           }
 
-          set(isActivityInCreateModeState(), false);
+          set(isActivityInCreateModeState, false);
         } else if (isDefined(activity)) {
           if (
             activity.title !== activityTitle ||

packages/twenty-front/src/modules/activities/components/ActivityTitle.tsx

@@ -71,7 +71,7 @@ export const ActivityTitle = ({ activityId }: ActivityTitleProps) => {
   const activity = activityInStore as Activity;
 
   const [canCreateActivity, setCanCreateActivity] = useRecoilState(
-    canCreateActivityState(),
+    canCreateActivityState,
   );
 
   const { upsertActivity } = useUpsertActivity();

packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx

@@ -122,7 +122,7 @@ export const EmailThreadPreview = ({
           isSameEventThanRightDrawerClose(event.nativeEvent);
 
         const emailThreadIdWhenEmailThreadWasClosed = snapshot
-          .getLoadable(emailThreadIdWhenEmailThreadWasClosedState())
+          .getLoadable(emailThreadIdWhenEmailThreadWasClosedState)
           .getValue();
 
         const canOpen =

packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx

@@ -58,12 +58,12 @@ export const EmailThreads = ({
 }) => {
   const { enqueueSnackBar } = useSnackBar();
 
-  const { getEmailThreadsPageState } = useEmailThreadStates({
+  const { emailThreadsPageState } = useEmailThreadStates({
     emailThreadScopeId: getScopeIdFromComponentId(entity.id),
   });
 
   const [emailThreadsPage, setEmailThreadsPage] = useRecoilState(
-    getEmailThreadsPageState(),
+    emailThreadsPageState,
   );
 
   const [isFetchingMoreEmails, setIsFetchingMoreEmails] = useState(false);

packages/twenty-front/src/modules/activities/emails/hooks/__tests__/useEmailThread.test.tsx

@@ -12,9 +12,9 @@ describe('useEmailThread', () => {
     const { result } = renderHook(
       () => {
         const emailThread = useEmailThread();
-        const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState());
+        const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState);
         const viewableEmailThreadId = useRecoilValue(
-          viewableEmailThreadIdState(),
+          viewableEmailThreadIdState,
         );
 
         return { ...emailThread, isRightDrawerOpen, viewableEmailThreadId };
@@ -38,10 +38,10 @@ describe('useEmailThread', () => {
       () => {
         const emailThread = useEmailThread();
         const [isRightDrawerOpen, setIsRightDrawerOpen] = useRecoilState(
-          isRightDrawerOpenState(),
+          isRightDrawerOpenState,
         );
         const [viewableEmailThreadId, setViewableEmailThreadId] =
-          useRecoilState(viewableEmailThreadIdState());
+          useRecoilState(viewableEmailThreadIdState);
 
         return {
           ...emailThread,

packages/twenty-front/src/modules/activities/emails/hooks/internal/__tests__/useEmailThreadStates.test.ts

@@ -30,7 +30,7 @@ describe('useEmailThreadStates hook', () => {
     );
 
     expect(result.current.scopeId).toBe(mockScopeId);
-    expect(result.current.getEmailThreadsPageState).toBe(
+    expect(result.current.emailThreadsPageState).toBe(
       mockGetEmailThreadsPageState,
     );
   });

packages/twenty-front/src/modules/activities/emails/hooks/internal/useEmailThreadStates.ts

@@ -17,7 +17,7 @@ export const useEmailThreadStates = ({
 
   return {
     scopeId,
-    getEmailThreadsPageState: extractComponentState(
+    emailThreadsPageState: extractComponentState(
       emailThreadsPageComponentState,
       scopeId,
     ),

packages/twenty-front/src/modules/activities/emails/hooks/useEmailThread.ts

@@ -13,21 +13,21 @@ export const useEmailThread = () => {
     ({ snapshot, set }) =>
       (threadId: string) => {
         const isRightDrawerOpen = snapshot
-          .getLoadable(isRightDrawerOpenState())
+          .getLoadable(isRightDrawerOpenState)
           .getValue();
 
         const viewableEmailThreadId = snapshot
-          .getLoadable(viewableEmailThreadIdState())
+          .getLoadable(viewableEmailThreadIdState)
           .getValue();
 
         if (isRightDrawerOpen && viewableEmailThreadId === threadId) {
-          set(viewableEmailThreadIdState(), null);
+          set(viewableEmailThreadIdState, null);
           closeRightDrawer();
           return;
         }
 
         openEmailThredRightDrawer();
-        set(viewableEmailThreadIdState(), threadId);
+        set(viewableEmailThreadIdState, threadId);
       },
     [closeRightDrawer, openEmailThredRightDrawer],
   );

packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx

@@ -34,7 +34,7 @@ export const RightDrawerEmailThread = () => {
     callbackFunction: useRecoilCallback(
       ({ set }) =>
         () => {
-          set(emailThreadIdWhenEmailThreadWasClosedState(), thread.id);
+          set(emailThreadIdWhenEmailThreadWasClosedState, thread.id);
         },
       [thread],
     ),

packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/useRightDrawerEmailThread.ts

@@ -9,7 +9,7 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 
 export const useRightDrawerEmailThread = () => {
-  const viewableEmailThreadId = useRecoilValue(viewableEmailThreadIdState());
+  const viewableEmailThreadId = useRecoilValue(viewableEmailThreadIdState);
 
   const apolloClient = useApolloClient();
   const thread = apolloClient.readFragment({

packages/twenty-front/src/modules/activities/files/hooks/useUploadAttachmentFile.tsx

@@ -10,7 +10,7 @@ import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
 import { FileFolder, useUploadFileMutation } from '~/generated/graphql';
 
 export const useUploadAttachmentFile = () => {
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
   const [uploadFile] = useUploadFileMutation();
 
   const { createOneRecord: createOneAttachment } =

packages/twenty-front/src/modules/activities/hooks/__tests__/useActivities.test.tsx

@@ -201,7 +201,7 @@ describe('useActivities', () => {
     const { result } = renderHook(
       () => {
         const setCurrentWorkspaceMember = useSetRecoilState(
-          currentWorkspaceMemberState(),
+          currentWorkspaceMemberState,
         );
 
         const activities = useActivities({

packages/twenty-front/src/modules/activities/hooks/__tests__/useActivityConnectionUtils.test.tsx

@@ -58,7 +58,7 @@ describe('useActivityConnectionUtils', () => {
         <RecoilRoot
           initializeState={(snapshot) => {
             snapshot.set(
-              objectMetadataItemsState(),
+              objectMetadataItemsState,
               getObjectMetadataItemsMock(),
             );
           }}
@@ -86,7 +86,7 @@ describe('useActivityConnectionUtils', () => {
         <RecoilRoot
           initializeState={(snapshot) => {
             snapshot.set(
-              objectMetadataItemsState(),
+              objectMetadataItemsState,
               getObjectMetadataItemsMock(),
             );
           }}

packages/twenty-front/src/modules/activities/hooks/__tests__/useActivityTargetObjectRecords.test.tsx

@@ -186,10 +186,10 @@ describe('useActivityTargetObjectRecords', () => {
     const { result } = renderHook(
       () => {
         const setCurrentWorkspaceMember = useSetRecoilState(
-          currentWorkspaceMemberState(),
+          currentWorkspaceMemberState,
         );
         const setObjectMetadataItems = useSetRecoilState(
-          objectMetadataItemsState(),
+          objectMetadataItemsState,
         );
 
         const { activityTargetObjectRecords, loadingActivityTargets } =

packages/twenty-front/src/modules/activities/hooks/__tests__/useActivityTargetsForTargetableObject.test.tsx

@@ -102,7 +102,7 @@ describe('useActivityTargetsForTargetableObject', () => {
     const { result } = renderHook(
       () => {
         const setCurrentWorkspaceMember = useSetRecoilState(
-          currentWorkspaceMemberState(),
+          currentWorkspaceMemberState,
         );
 
         const res = useActivityTargetsForTargetableObject({

packages/twenty-front/src/modules/activities/hooks/__tests__/useAttachRelationInBothDirections.test.tsx

@@ -29,10 +29,10 @@ describe('useAttachRelationInBothDirections', () => {
     const { result } = renderHook(
       () => {
         const setCurrentWorkspaceMember = useSetRecoilState(
-          currentWorkspaceMemberState(),
+          currentWorkspaceMemberState,
         );
         const setObjectMetadataItems = useSetRecoilState(
-          objectMetadataItemsState(),
+          objectMetadataItemsState,
         );
 
         const res = useAttachRelationInBothDirections();

packages/twenty-front/src/modules/activities/hooks/__tests__/useCreateActivityInCache.test.tsx

@@ -59,10 +59,10 @@ describe('useCreateActivityInCache', () => {
     const { result } = renderHook(
       () => {
         const setCurrentWorkspaceMember = useSetRecoilState(
-          currentWorkspaceMemberState(),
+          currentWorkspaceMemberState,
         );
         const setObjectMetadataItems = useSetRecoilState(
-          objectMetadataItemsState(),
+          objectMetadataItemsState,
         );
 
         const res = useCreateActivityInCache();

packages/twenty-front/src/modules/activities/hooks/__tests__/useOpenActivityRightDrawer.test.tsx

@@ -18,8 +18,8 @@ describe('useOpenActivityRightDrawer', () => {
     const { result } = renderHook(
       () => {
         const openActivityRightDrawer = useOpenActivityRightDrawer();
-        const viewableActivityId = useRecoilValue(viewableActivityIdState());
+        const viewableActivityId = useRecoilValue(viewableActivityIdState);
-        const activityIdInDrawer = useRecoilValue(activityIdInDrawerState());
+        const activityIdInDrawer = useRecoilValue(activityIdInDrawerState);
         return {
           openActivityRightDrawer,
           activityIdInDrawer,

packages/twenty-front/src/modules/activities/hooks/__tests__/useOpenCreateActivityDrawer.test.tsx

@@ -28,10 +28,10 @@ describe('useOpenCreateActivityDrawer', () => {
     const { result } = renderHook(
       () => {
         const openActivityRightDrawer = useOpenCreateActivityDrawer();
-        const viewableActivityId = useRecoilValue(viewableActivityIdState());
+        const viewableActivityId = useRecoilValue(viewableActivityIdState);
-        const activityIdInDrawer = useRecoilValue(activityIdInDrawerState());
+        const activityIdInDrawer = useRecoilValue(activityIdInDrawerState);
         const setObjectMetadataItems = useSetRecoilState(
-          objectMetadataItemsState(),
+          objectMetadataItemsState,
         );
         return {
           openActivityRightDrawer,

packages/twenty-front/src/modules/activities/hooks/__tests__/useOpenCreateActivityDrawerForSelectedRowIds.test.tsx

@@ -41,10 +41,10 @@ describe('useOpenCreateActivityDrawerForSelectedRowIds', () => {
       () => {
         const openCreateActivityDrawerForSelectedRowIds =
           useOpenCreateActivityDrawerForSelectedRowIds(recordTableId);
-        const viewableActivityId = useRecoilValue(viewableActivityIdState());
+        const viewableActivityId = useRecoilValue(viewableActivityIdState);
-        const activityIdInDrawer = useRecoilValue(activityIdInDrawerState());
+        const activityIdInDrawer = useRecoilValue(activityIdInDrawerState);
         const setObjectMetadataItems = useSetRecoilState(
-          objectMetadataItemsState(),
+          objectMetadataItemsState,
         );
         const scopeId = `${recordTableId}-scope`;
         const setTableRowIds = useSetRecoilState(

packages/twenty-front/src/modules/activities/hooks/__tests__/useUpsertActivity.test.tsx

@@ -105,7 +105,7 @@ describe('useUpsertActivity', () => {
       () => {
         const res = useUpsertActivity();
         const setIsActivityInCreateMode = useSetRecoilState(
-          isActivityInCreateModeState(),
+          isActivityInCreateModeState,
         );
 
         return { ...res, setIsActivityInCreateMode };
@@ -134,7 +134,7 @@ describe('useUpsertActivity', () => {
       () => {
         const res = useUpsertActivity();
         const setIsActivityInCreateMode = useSetRecoilState(
-          isActivityInCreateModeState(),
+          isActivityInCreateModeState,
         );
         const setObjectShowPageTargetableObject = useSetRecoilState(
           objectShowPageTargetableObjectState,

packages/twenty-front/src/modules/activities/hooks/useActivityTargetObjectRecords.ts

@@ -14,7 +14,7 @@ export const useActivityTargetObjectRecords = ({
 }: {
   activityId: string;
 }) => {
-  const objectMetadataItems = useRecoilValue(objectMetadataItemsState());
+  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
 
   const { records: activityTargets, loading: loadingActivityTargets } =
     useFindManyRecords<ActivityTarget>({

packages/twenty-front/src/modules/activities/hooks/useCreateActivityInCache.ts

@@ -27,7 +27,7 @@ export const useCreateActivityInCache = () => {
       objectNameSingular: CoreObjectNameSingular.Activity,
     });
 
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
 
   const { record: currentWorkspaceMemberRecord } = useFindOneRecord({
     objectNameSingular: CoreObjectNameSingular.WorkspaceMember,

packages/twenty-front/src/modules/activities/hooks/useOpenActivityRightDrawer.ts

@@ -12,9 +12,9 @@ export const useOpenActivityRightDrawer = () => {
   const { openRightDrawer, isRightDrawerOpen, rightDrawerPage } =
     useRightDrawer();
   const [viewableActivityId, setViewableActivityId] = useRecoilState(
-    viewableActivityIdState(),
+    viewableActivityIdState,
   );
-  const setActivityIdInDrawer = useSetRecoilState(activityIdInDrawerState());
+  const setActivityIdInDrawer = useSetRecoilState(activityIdInDrawerState);
   const setHotkeyScope = useSetHotkeyScope();
 
   return (activityId: string) => {

packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts

@@ -24,22 +24,20 @@ export const useOpenCreateActivityDrawer = () => {
   const { createActivityInCache } = useCreateActivityInCache();
 
   const setActivityTargetableEntityArray = useSetRecoilState(
-    activityTargetableEntityArrayState(),
+    activityTargetableEntityArrayState,
   );
-  const setViewableActivityId = useSetRecoilState(viewableActivityIdState());
+  const setViewableActivityId = useSetRecoilState(viewableActivityIdState);
 
-  const setIsCreatingActivity = useSetRecoilState(
+  const setIsCreatingActivity = useSetRecoilState(isActivityInCreateModeState);
-    isActivityInCreateModeState(),
-  );
 
   const setTemporaryActivityForEditor = useSetRecoilState(
-    temporaryActivityForEditorState(),
+    temporaryActivityForEditorState,
   );
 
-  const setActivityIdInDrawer = useSetRecoilState(activityIdInDrawerState());
+  const setActivityIdInDrawer = useSetRecoilState(activityIdInDrawerState);
 
   const [, setIsUpsertingActivityInDB] = useRecoilState(
-    isUpsertingActivityInDBState(),
+    isUpsertingActivityInDBState,
   );
 
   const openCreateActivityDrawer = async ({

packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts

@@ -14,7 +14,7 @@ export const useOpenCreateActivityDrawerForSelectedRowIds = (
 ) => {
   const openCreateActivityDrawer = useOpenCreateActivityDrawer();
 
-  const { getSelectedRowIdsSelector } = useRecordTableStates(recordTableId);
+  const { selectedRowIdsSelector } = useRecordTableStates(recordTableId);
 
   return useRecoilCallback(
     ({ snapshot }) =>
@@ -25,7 +25,7 @@ export const useOpenCreateActivityDrawerForSelectedRowIds = (
       ) => {
         const selectedRowIds = getSnapshotValue(
           snapshot,
-          getSelectedRowIdsSelector(),
+          selectedRowIdsSelector(),
         );
 
         let activityTargetableObjectArray: ActivityTargetableObject[] =
@@ -59,6 +59,6 @@ export const useOpenCreateActivityDrawerForSelectedRowIds = (
           targetableObjects: activityTargetableObjectArray,
         });
       },
-    [openCreateActivityDrawer, getSelectedRowIdsSelector],
+    [selectedRowIdsSelector, openCreateActivityDrawer],
   );
 };

packages/twenty-front/src/modules/activities/hooks/useUpsertActivity.ts

@@ -21,7 +21,7 @@ import { isDefined } from '~/utils/isDefined';
 // TODO: create a generic way to have records only in cache for create mode and delete them afterwards ?
 export const useUpsertActivity = () => {
   const [isActivityInCreateMode, setIsActivityInCreateMode] = useRecoilState(
-    isActivityInCreateModeState(),
+    isActivityInCreateModeState,
   );
 
   const { updateOneRecord: updateOneActivity } = useUpdateOneRecord<Activity>({
@@ -31,10 +31,10 @@ export const useUpsertActivity = () => {
   const { createActivityInDB } = useCreateActivityInDB();
 
   const [, setIsUpsertingActivityInDB] = useRecoilState(
-    isUpsertingActivityInDBState(),
+    isUpsertingActivityInDBState,
   );
 
-  const setActivityIdInDrawer = useSetRecoilState(activityIdInDrawerState());
+  const setActivityIdInDrawer = useSetRecoilState(activityIdInDrawerState);
 
   const objectShowPageTargetableObject = useRecoilValue(
     objectShowPageTargetableObjectState,

packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetInlineCellEditMode.tsx

@@ -34,9 +34,7 @@ export const ActivityTargetInlineCellEditMode = ({
   activity,
   activityTargetWithTargetRecords,
 }: ActivityTargetInlineCellEditModeProps) => {
-  const [isActivityInCreateMode] = useRecoilState(
+  const [isActivityInCreateMode] = useRecoilState(isActivityInCreateModeState);
-    isActivityInCreateModeState(),
-  );
 
   const selectedTargetObjectIds = activityTargetWithTargetRecords.map(
     (activityTarget) => ({

packages/twenty-front/src/modules/activities/right-drawer/components/ActivityActionBar.tsx

@@ -36,13 +36,13 @@ const StyledButtonContainer = styled.div`
 `;
 
 export const ActivityActionBar = () => {
-  const viewableActivityId = useRecoilValue(viewableActivityIdState());
+  const viewableActivityId = useRecoilValue(viewableActivityIdState);
-  const activityIdInDrawer = useRecoilValue(activityIdInDrawerState());
+  const activityIdInDrawer = useRecoilValue(activityIdInDrawerState);
 
   const activityTargetableEntityArray = useRecoilValue(
-    activityTargetableEntityArrayState(),
+    activityTargetableEntityArrayState,
   );
-  const [, setIsRightDrawerOpen] = useRecoilState(isRightDrawerOpenState());
+  const [, setIsRightDrawerOpen] = useRecoilState(isRightDrawerOpenState);
   const { deleteOneRecord: deleteOneActivity } = useDeleteOneRecord({
     objectNameSingular: CoreObjectNameSingular.Activity,
   });
@@ -54,15 +54,13 @@ export const ActivityActionBar = () => {
   );
 
   const [temporaryActivityForEditor, setTemporaryActivityForEditor] =
-    useRecoilState(temporaryActivityForEditorState());
+    useRecoilState(temporaryActivityForEditorState);
 
   const { deleteActivityFromCache } = useDeleteActivityFromCache();
 
-  const [isActivityInCreateMode] = useRecoilState(
+  const [isActivityInCreateMode] = useRecoilState(isActivityInCreateModeState);
-    isActivityInCreateModeState(),
-  );
   const [isUpsertingActivityInDB] = useRecoilState(
-    isUpsertingActivityInDBState(),
+    isUpsertingActivityInDBState,
   );
 
   const objectShowPageTargetableObject = useRecoilValue(

packages/twenty-front/src/modules/activities/right-drawer/components/create/RightDrawerCreateActivity.tsx

@@ -5,7 +5,7 @@ import { viewableActivityIdState } from '@/activities/states/viewableActivityIdS
 import { RightDrawerActivity } from '../RightDrawerActivity';
 
 export const RightDrawerCreateActivity = () => {
-  const viewableActivityId = useRecoilValue(viewableActivityIdState());
+  const viewableActivityId = useRecoilValue(viewableActivityIdState);
 
   return (
     <>

packages/twenty-front/src/modules/activities/right-drawer/components/edit/RightDrawerEditActivity.tsx

@@ -5,7 +5,7 @@ import { viewableActivityIdState } from '@/activities/states/viewableActivityIdS
 import { RightDrawerActivity } from '../RightDrawerActivity';
 
 export const RightDrawerEditActivity = () => {
-  const viewableActivityId = useRecoilValue(viewableActivityIdState());
+  const viewableActivityId = useRecoilValue(viewableActivityIdState);
 
   return (
     <>

packages/twenty-front/src/modules/activities/tasks/components/CurrentUserDueTaskCountEffect.tsx

@@ -9,10 +9,10 @@ import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { parseDate } from '~/utils/date-utils';
 
 export const CurrentUserDueTaskCountEffect = () => {
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
 
   const [currentUserDueTaskCount, setCurrentUserDueTaskCount] = useRecoilState(
-    currentUserDueTaskCountState(),
+    currentUserDueTaskCountState,
   );
 
   const { records: tasks } = useFindManyRecords({

packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx

@@ -48,8 +48,8 @@ export const TaskGroups = ({
 
   const openCreateActivity = useOpenCreateActivityDrawer();
 
-  const { getActiveTabIdState } = useTabList(TASKS_TAB_LIST_COMPONENT_ID);
+  const { activeTabIdState } = useTabList(TASKS_TAB_LIST_COMPONENT_ID);
-  const activeTabId = useRecoilValue(getActiveTabIdState());
+  const activeTabId = useRecoilValue(activeTabIdState);
 
   if (!initialized) {
     return <></>;

packages/twenty-front/src/modules/activities/tasks/hooks/useCurrentUserDueTaskCount.ts

@@ -7,7 +7,7 @@ import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { parseDate } from '~/utils/date-utils';
 
 export const useCurrentUserTaskCount = () => {
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
 
   const { records: tasks } = useFindManyRecords({
     objectNameSingular: CoreObjectNameSingular.Activity,

packages/twenty-front/src/modules/activities/tasks/hooks/useTasks.ts

@@ -1,7 +1,7 @@
 import { useEffect, useMemo } from 'react';
 import { isNonEmptyArray } from '@sniptt/guards';
 import { DateTime } from 'luxon';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { useActivities } from '@/activities/hooks/useActivities';
 import { currentCompletedTaskQueryVariablesState } from '@/activities/tasks/states/currentCompletedTaskQueryVariablesState';
@@ -23,10 +23,12 @@ export const useTasks = ({
   targetableObjects,
   filterDropdownId,
 }: UseTasksProps) => {
-  const { selectedFilter } = useFilterDropdown({
+  const { selectedFilterState } = useFilterDropdown({
     filterDropdownId,
   });
 
+  const selectedFilter = useRecoilValue(selectedFilterState);
+
   const assigneeIdFilter = useMemo(
     () =>
       selectedFilter

packages/twenty-front/src/modules/activities/timeline/components/Timeline.tsx

@@ -33,7 +33,7 @@ export const Timeline = ({
   targetableObject: ActivityTargetableObject;
 }) => {
   const { initialized, noActivities } = useRecoilValue(
-    timelineActivitiesNetworkingState(),
+    timelineActivitiesNetworkingState,
   );
 
   const showEmptyState = noActivities;

packages/twenty-front/src/modules/activities/timeline/components/TimelineCreateButtonGroup.tsx

@@ -16,8 +16,8 @@ export const TimelineCreateButtonGroup = ({
 }: {
   targetableObject: ActivityTargetableObject;
 }) => {
-  const { getActiveTabIdState } = useTabList(TAB_LIST_COMPONENT_ID);
+  const { activeTabIdState } = useTabList(TAB_LIST_COMPONENT_ID);
-  const setActiveTabId = useSetRecoilState(getActiveTabIdState());
+  const setActiveTabId = useSetRecoilState(activeTabIdState);
 
   const openCreateActivity = useOpenCreateActivityDrawer();
 

packages/twenty-front/src/modules/activities/timeline/components/TimelineItemsContainer.tsx

@@ -26,7 +26,7 @@ const StyledScrollWrapper = styled(ScrollWrapper)``;
 
 export const TimelineItemsContainer = () => {
   const timelineActivitiesForGroup = useRecoilValue(
-    timelineActivitiesForGroupState(),
+    timelineActivitiesForGroupState,
   );
 
   const groupedActivities = groupActivitiesByMonth(timelineActivitiesForGroup);

packages/twenty-front/src/modules/activities/timeline/components/TimelineQueryEffect.tsx

@@ -35,10 +35,10 @@ export const TimelineQueryEffect = ({
   });
 
   const [timelineActivitiesNetworking, setTimelineActivitiesNetworking] =
-    useRecoilState(timelineActivitiesNetworkingState());
+    useRecoilState(timelineActivitiesNetworkingState);
 
   const [timelineActivitiesForGroup, setTimelineActivitiesForGroup] =
-    useRecoilState(timelineActivitiesForGroupState());
+    useRecoilState(timelineActivitiesForGroupState);
 
   useEffect(() => {
     if (!isDefined(targetableObject)) {

packages/twenty-front/src/modules/analytics/hooks/useEventTracker.ts

@@ -13,7 +13,7 @@ export interface EventData {
 }
 
 export const useEventTracker = () => {
-  const telemetry = useRecoilValue(telemetryState());
+  const telemetry = useRecoilValue(telemetryState);
   const [createEventMutation] = useTrackMutation();
 
   return useCallback(

packages/twenty-front/src/modules/apollo/hooks/useApolloFactory.ts

@@ -16,11 +16,11 @@ import { ApolloFactory } from '../services/apollo.factory';
 export const useApolloFactory = () => {
   // eslint-disable-next-line @nx/workspace-no-state-useref
   const apolloRef = useRef<ApolloFactory<NormalizedCacheObject> | null>(null);
-  const [isDebugMode] = useRecoilState(isDebugModeState());
+  const [isDebugMode] = useRecoilState(isDebugModeState);
 
   const navigate = useNavigate();
   const isMatchingLocation = useIsMatchingLocation();
-  const [tokenPair, setTokenPair] = useRecoilState(tokenPairState());
+  const [tokenPair, setTokenPair] = useRecoilState(tokenPairState);
 
   const apolloClient = useMemo(() => {
     apolloRef.current = new ApolloFactory({

packages/twenty-front/src/modules/apollo/optimistic-effect/utils/triggerUpdateRelationsOptimisticEffect.ts

@@ -26,127 +26,129 @@ export const triggerUpdateRelationsOptimisticEffect = ({
   currentSourceRecord: CachedObjectRecord | null;
   updatedSourceRecord: CachedObjectRecord | null;
   objectMetadataItems: ObjectMetadataItem[];
-}) =>
+}) => {
-  sourceObjectMetadataItem.fields.forEach((fieldMetadataItemOnSourceRecord) => {
+  return sourceObjectMetadataItem.fields.forEach(
-    const notARelationField =
+    (fieldMetadataItemOnSourceRecord) => {
-      fieldMetadataItemOnSourceRecord.type !== FieldMetadataType.Relation;
+      const notARelationField =
+        fieldMetadataItemOnSourceRecord.type !== FieldMetadataType.Relation;
 
-    if (notARelationField) {
+      if (notARelationField) {
-      return;
+        return;
-    }
+      }
 
-    const fieldDoesNotExist =
+      const fieldDoesNotExist =
-      isDefined(updatedSourceRecord) &&
+        isDefined(updatedSourceRecord) &&
-      !(fieldMetadataItemOnSourceRecord.name in updatedSourceRecord);
+        !(fieldMetadataItemOnSourceRecord.name in updatedSourceRecord);
 
-    if (fieldDoesNotExist) {
+      if (fieldDoesNotExist) {
-      return;
+        return;
-    }
+      }
 
-    const relationDefinition = getRelationDefinition({
+      const relationDefinition = getRelationDefinition({
-      fieldMetadataItemOnSourceRecord,
+        fieldMetadataItemOnSourceRecord,
-      objectMetadataItems,
+        objectMetadataItems,
-    });
+      });
+      if (!relationDefinition) {
+        return;
+      }
 
-    if (!relationDefinition) {
+      const { targetObjectMetadataItem, fieldMetadataItemOnTargetRecord } =
-      return;
+        relationDefinition;
-    }
 
-    const { targetObjectMetadataItem, fieldMetadataItemOnTargetRecord } =
+      const currentFieldValueOnSourceRecord:
-      relationDefinition;
+        | ObjectRecordConnection
+        | CachedObjectRecord
+        | null = currentSourceRecord?.[fieldMetadataItemOnSourceRecord.name];
 
-    const currentFieldValueOnSourceRecord:
+      const updatedFieldValueOnSourceRecord:
-      | ObjectRecordConnection
+        | ObjectRecordConnection
-      | CachedObjectRecord
+        | CachedObjectRecord
-      | null = currentSourceRecord?.[fieldMetadataItemOnSourceRecord.name];
+        | null = updatedSourceRecord?.[fieldMetadataItemOnSourceRecord.name];
 
-    const updatedFieldValueOnSourceRecord:
+      if (
-      | ObjectRecordConnection
+        isDeeplyEqual(
-      | CachedObjectRecord
+          currentFieldValueOnSourceRecord,
-      | null = updatedSourceRecord?.[fieldMetadataItemOnSourceRecord.name];
+          updatedFieldValueOnSourceRecord,
+        )
+      ) {
+        return;
+      }
 
-    if (
+      // TODO: replace this by a relation type check, if it's one to many,
-      isDeeplyEqual(
+      //   it's an object record connection (we can still check it though as a safeguard)
-        currentFieldValueOnSourceRecord,
+      const currentFieldValueOnSourceRecordIsARecordConnection =
-        updatedFieldValueOnSourceRecord,
+        isObjectRecordConnection(
-      )
+          targetObjectMetadataItem.nameSingular,
-    ) {
+          currentFieldValueOnSourceRecord,
-      return;
-    }
-
-    // TODO: replace this by a relation type check, if it's one to many,
-    //   it's an object record connection (we can still check it though as a safeguard)
-    const currentFieldValueOnSourceRecordIsARecordConnection =
-      isObjectRecordConnection(
-        targetObjectMetadataItem.nameSingular,
-        currentFieldValueOnSourceRecord,
-      );
-
-    const targetRecordsToDetachFrom =
-      currentFieldValueOnSourceRecordIsARecordConnection
-        ? currentFieldValueOnSourceRecord.edges.map(
-            ({ node }) => node as CachedObjectRecord,
-          )
-        : [currentFieldValueOnSourceRecord].filter(isDefined);
-
-    const updatedFieldValueOnSourceRecordIsARecordConnection =
-      isObjectRecordConnection(
-        targetObjectMetadataItem.nameSingular,
-        updatedFieldValueOnSourceRecord,
-      );
-
-    const targetRecordsToAttachTo =
-      updatedFieldValueOnSourceRecordIsARecordConnection
-        ? updatedFieldValueOnSourceRecord.edges.map(
-            ({ node }) => node as CachedObjectRecord,
-          )
-        : [updatedFieldValueOnSourceRecord].filter(isDefined);
-
-    const shouldDetachSourceFromAllTargets =
-      isDefined(currentSourceRecord) && targetRecordsToDetachFrom.length > 0;
-
-    if (shouldDetachSourceFromAllTargets) {
-      // TODO: see if we can de-hardcode this, put cascade delete in relation metadata item
-      //   Instead of hardcoding it here
-      const shouldCascadeDeleteTargetRecords =
-        CORE_OBJECT_NAMES_TO_DELETE_ON_TRIGGER_RELATION_DETACH.includes(
-          targetObjectMetadataItem.nameSingular as CoreObjectNameSingular,
         );
 
-      if (shouldCascadeDeleteTargetRecords) {
+      const targetRecordsToDetachFrom =
-        triggerDeleteRecordsOptimisticEffect({
+        currentFieldValueOnSourceRecordIsARecordConnection
-          cache,
+          ? currentFieldValueOnSourceRecord.edges.map(
-          objectMetadataItem: targetObjectMetadataItem,
+              ({ node }) => node as CachedObjectRecord,
-          recordsToDelete: targetRecordsToDetachFrom,
+            )
-          objectMetadataItems,
+          : [currentFieldValueOnSourceRecord].filter(isDefined);
-        });
+
-      } else {
+      const updatedFieldValueOnSourceRecordIsARecordConnection =
-        targetRecordsToDetachFrom.forEach((targetRecordToDetachFrom) => {
+        isObjectRecordConnection(
-          triggerDetachRelationOptimisticEffect({
+          targetObjectMetadataItem.nameSingular,
+          updatedFieldValueOnSourceRecord,
+        );
+
+      const targetRecordsToAttachTo =
+        updatedFieldValueOnSourceRecordIsARecordConnection
+          ? updatedFieldValueOnSourceRecord.edges.map(
+              ({ node }) => node as CachedObjectRecord,
+            )
+          : [updatedFieldValueOnSourceRecord].filter(isDefined);
+
+      const shouldDetachSourceFromAllTargets =
+        isDefined(currentSourceRecord) && targetRecordsToDetachFrom.length > 0;
+
+      if (shouldDetachSourceFromAllTargets) {
+        // TODO: see if we can de-hardcode this, put cascade delete in relation metadata item
+        //   Instead of hardcoding it here
+        const shouldCascadeDeleteTargetRecords =
+          CORE_OBJECT_NAMES_TO_DELETE_ON_TRIGGER_RELATION_DETACH.includes(
+            targetObjectMetadataItem.nameSingular as CoreObjectNameSingular,
+          );
+
+        if (shouldCascadeDeleteTargetRecords) {
+          triggerDeleteRecordsOptimisticEffect({
+            cache,
+            objectMetadataItem: targetObjectMetadataItem,
+            recordsToDelete: targetRecordsToDetachFrom,
+            objectMetadataItems,
+          });
+        } else {
+          targetRecordsToDetachFrom.forEach((targetRecordToDetachFrom) => {
+            triggerDetachRelationOptimisticEffect({
+              cache,
+              sourceObjectNameSingular: sourceObjectMetadataItem.nameSingular,
+              sourceRecordId: currentSourceRecord.id,
+              fieldNameOnTargetRecord: fieldMetadataItemOnTargetRecord.name,
+              targetObjectNameSingular: targetObjectMetadataItem.nameSingular,
+              targetRecordId: targetRecordToDetachFrom.id,
+            });
+          });
+        }
+      }
+
+      const shouldAttachSourceToAllTargets =
+        isDefined(updatedSourceRecord) && targetRecordsToAttachTo.length > 0;
+
+      if (shouldAttachSourceToAllTargets) {
+        targetRecordsToAttachTo.forEach((targetRecordToAttachTo) =>
+          triggerAttachRelationOptimisticEffect({
             cache,
             sourceObjectNameSingular: sourceObjectMetadataItem.nameSingular,
-            sourceRecordId: currentSourceRecord.id,
+            sourceRecordId: updatedSourceRecord.id,
             fieldNameOnTargetRecord: fieldMetadataItemOnTargetRecord.name,
             targetObjectNameSingular: targetObjectMetadataItem.nameSingular,
-            targetRecordId: targetRecordToDetachFrom.id,
+            targetRecordId: targetRecordToAttachTo.id,
-          });
+          }),
-        });
+        );
       }
-    }
+    },
-
+  );
-    const shouldAttachSourceToAllTargets =
+};
-      isDefined(updatedSourceRecord) && targetRecordsToAttachTo.length > 0;
-
-    if (shouldAttachSourceToAllTargets) {
-      targetRecordsToAttachTo.forEach((targetRecordToAttachTo) =>
-        triggerAttachRelationOptimisticEffect({
-          cache,
-          sourceObjectNameSingular: sourceObjectMetadataItem.nameSingular,
-          sourceRecordId: updatedSourceRecord.id,
-          fieldNameOnTargetRecord: fieldMetadataItemOnTargetRecord.name,
-          targetObjectNameSingular: targetObjectMetadataItem.nameSingular,
-          targetRecordId: targetRecordToAttachTo.id,
-        }),
-      );
-    }
-  });

packages/twenty-front/src/modules/auth/hooks/__test__/useAuth.test.tsx

@@ -76,13 +76,13 @@ describe('useAuth', () => {
     const { result } = renderHook(
       () => {
         const client = useApolloClient();
-        const icons = useRecoilValue(iconsState());
+        const icons = useRecoilValue(iconsState);
-        const authProviders = useRecoilValue(authProvidersState());
+        const authProviders = useRecoilValue(authProvidersState);
-        const billing = useRecoilValue(billingState());
+        const billing = useRecoilValue(billingState);
-        const isSignInPrefilled = useRecoilValue(isSignInPrefilledState());
+        const isSignInPrefilled = useRecoilValue(isSignInPrefilledState);
-        const supportChat = useRecoilValue(supportChatState());
+        const supportChat = useRecoilValue(supportChatState);
-        const telemetry = useRecoilValue(telemetryState());
+        const telemetry = useRecoilValue(telemetryState);
-        const isDebugMode = useRecoilValue(isDebugModeState());
+        const isDebugMode = useRecoilValue(isDebugModeState);
         return {
           ...useAuth(),
           client,

packages/twenty-front/src/modules/auth/hooks/__test__/useIsLogged.test.ts

@@ -9,7 +9,7 @@ const renderHooks = () => {
   const { result } = renderHook(
     () => {
       const isLogged = useIsLogged();
-      const setTokenPair = useSetRecoilState(tokenPairState());
+      const setTokenPair = useSetRecoilState(tokenPairState);
 
       return {
         isLogged,

packages/twenty-front/src/modules/auth/hooks/__test__/useOnboardingStatus.test.ts

@@ -38,13 +38,13 @@ const renderHooks = () => {
   const { result } = renderHook(
     () => {
       const onboardingStatus = useOnboardingStatus();
-      const setBilling = useSetRecoilState(billingState());
+      const setBilling = useSetRecoilState(billingState);
-      const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState());
+      const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
       const setCurrentWorkspaceMember = useSetRecoilState(
-        currentWorkspaceMemberState(),
+        currentWorkspaceMemberState,
       );
-      const setTokenPair = useSetRecoilState(tokenPairState());
+      const setTokenPair = useSetRecoilState(tokenPairState);
-      const setVerifyPending = useSetRecoilState(isVerifyPendingState());
+      const setVerifyPending = useSetRecoilState(isVerifyPendingState);
 
       return {
         onboardingStatus,

packages/twenty-front/src/modules/auth/hooks/useAuth.ts

@@ -32,14 +32,14 @@ import { currentUserState } from '../states/currentUserState';
 import { tokenPairState } from '../states/tokenPairState';
 
 export const useAuth = () => {
-  const [, setTokenPair] = useRecoilState(tokenPairState());
+  const [, setTokenPair] = useRecoilState(tokenPairState);
-  const setCurrentUser = useSetRecoilState(currentUserState());
+  const setCurrentUser = useSetRecoilState(currentUserState);
   const setCurrentWorkspaceMember = useSetRecoilState(
-    currentWorkspaceMemberState(),
+    currentWorkspaceMemberState,
   );
 
-  const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState());
+  const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
-  const setIsVerifyPendingState = useSetRecoilState(isVerifyPendingState());
+  const setIsVerifyPendingState = useSetRecoilState(isVerifyPendingState);
 
   const [challenge] = useChallengeMutation();
   const [signUp] = useSignUpMutation();
@@ -141,26 +141,26 @@ export const useAuth = () => {
     ({ snapshot }) =>
       async () => {
         const emptySnapshot = snapshot_UNSTABLE();
-        const iconsValue = snapshot.getLoadable(iconsState()).getValue();
+        const iconsValue = snapshot.getLoadable(iconsState).getValue();
         const authProvidersValue = snapshot
-          .getLoadable(authProvidersState())
+          .getLoadable(authProvidersState)
           .getValue();
-        const billing = snapshot.getLoadable(billingState()).getValue();
+        const billing = snapshot.getLoadable(billingState).getValue();
         const isSignInPrefilled = snapshot
-          .getLoadable(isSignInPrefilledState())
+          .getLoadable(isSignInPrefilledState)
           .getValue();
-        const supportChat = snapshot.getLoadable(supportChatState()).getValue();
+        const supportChat = snapshot.getLoadable(supportChatState).getValue();
-        const telemetry = snapshot.getLoadable(telemetryState()).getValue();
+        const telemetry = snapshot.getLoadable(telemetryState).getValue();
-        const isDebugMode = snapshot.getLoadable(isDebugModeState()).getValue();
+        const isDebugMode = snapshot.getLoadable(isDebugModeState).getValue();
 
         const initialSnapshot = emptySnapshot.map(({ set }) => {
-          set(iconsState(), iconsValue);
+          set(iconsState, iconsValue);
-          set(authProvidersState(), authProvidersValue);
+          set(authProvidersState, authProvidersValue);
-          set(billingState(), billing);
+          set(billingState, billing);
-          set(isSignInPrefilledState(), isSignInPrefilled);
+          set(isSignInPrefilledState, isSignInPrefilled);
-          set(supportChatState(), supportChat);
+          set(supportChatState, supportChat);
-          set(telemetryState(), telemetry);
+          set(telemetryState, telemetry);
-          set(isDebugModeState(), isDebugMode);
+          set(isDebugModeState, isDebugMode);
           return undefined;
         });
 

packages/twenty-front/src/modules/auth/hooks/useIsLogged.ts

@@ -5,8 +5,8 @@ import { isVerifyPendingState } from '@/auth/states/isVerifyPendingState';
 import { tokenPairState } from '../states/tokenPairState';
 
 export const useIsLogged = (): boolean => {
-  const [tokenPair] = useRecoilState(tokenPairState());
+  const [tokenPair] = useRecoilState(tokenPairState);
-  const isVerifyPending = useRecoilValue(isVerifyPendingState());
+  const isVerifyPending = useRecoilValue(isVerifyPendingState);
 
   return !!tokenPair && !isVerifyPending;
 };

packages/twenty-front/src/modules/auth/hooks/useOnboardingStatus.ts

@@ -11,9 +11,9 @@ import {
 } from '../utils/getOnboardingStatus';
 
 export const useOnboardingStatus = (): OnboardingStatus | undefined => {
-  const billing = useRecoilValue(billingState());
+  const billing = useRecoilValue(billingState);
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
-  const currentWorkspace = useRecoilValue(currentWorkspaceState());
+  const currentWorkspace = useRecoilValue(currentWorkspaceState);
   const isLoggedIn = useIsLogged();
 
   return getOnboardingStatus({

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx

@@ -46,7 +46,7 @@ const StyledInputContainer = styled.div`
 `;
 
 export const SignInUpForm = () => {
-  const [authProviders] = useRecoilState(authProvidersState());
+  const [authProviders] = useRecoilState(authProvidersState);
   const [showErrors, setShowErrors] = useState(false);
   const { handleResetPassword } = useHandleResetPassword();
   const workspace = useWorkspaceFromInviteHash();

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useNavigateAfterSignInUp.ts

@@ -9,7 +9,7 @@ import { WorkspaceMember } from '~/generated/graphql.tsx';
 
 export const useNavigateAfterSignInUp = () => {
   const navigate = useNavigate();
-  const billing = useRecoilValue(billingState());
+  const billing = useRecoilValue(billingState);
   const navigateAfterSignInUp = useCallback(
     (
       currentWorkspace: CurrentWorkspace,

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUpForm.ts

@@ -19,7 +19,7 @@ const validationSchema = z
 
 export type Form = z.infer<typeof validationSchema>;
 export const useSignInUpForm = () => {
-  const isSignInPrefilled = useRecoilValue(isSignInPrefilledState());
+  const isSignInPrefilled = useRecoilValue(isSignInPrefilledState);
   const form = useForm<Form>({
     mode: 'onChange',
     defaultValues: {

packages/twenty-front/src/modules/client-config/components/ClientConfigProvider.tsx

@@ -15,17 +15,17 @@ import { isDefined } from '~/utils/isDefined';
 export const ClientConfigProvider: React.FC<React.PropsWithChildren> = ({
   children,
 }) => {
-  const setAuthProviders = useSetRecoilState(authProvidersState());
+  const setAuthProviders = useSetRecoilState(authProvidersState);
-  const setIsDebugMode = useSetRecoilState(isDebugModeState());
+  const setIsDebugMode = useSetRecoilState(isDebugModeState);
 
-  const setIsSignInPrefilled = useSetRecoilState(isSignInPrefilledState());
+  const setIsSignInPrefilled = useSetRecoilState(isSignInPrefilledState);
-  const setIsSignUpDisabled = useSetRecoilState(isSignUpDisabledState());
+  const setIsSignUpDisabled = useSetRecoilState(isSignUpDisabledState);
 
-  const setBilling = useSetRecoilState(billingState());
+  const setBilling = useSetRecoilState(billingState);
-  const setTelemetry = useSetRecoilState(telemetryState());
+  const setTelemetry = useSetRecoilState(telemetryState);
-  const setSupportChat = useSetRecoilState(supportChatState());
+  const setSupportChat = useSetRecoilState(supportChatState);
 
-  const setSentryConfig = useSetRecoilState(sentryConfigState());
+  const setSentryConfig = useSetRecoilState(sentryConfigState);
 
   const { data, loading } = useGetClientConfigQuery();
 

packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx

@@ -109,9 +109,9 @@ export const CommandMenu = () => {
   const openActivityRightDrawer = useOpenActivityRightDrawer();
   const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);
   const [commandMenuSearch, setCommandMenuSearch] = useRecoilState(
-    commandMenuSearchState(),
+    commandMenuSearchState,
   );
-  const commandMenuCommands = useRecoilValue(commandMenuCommandsState());
+  const commandMenuCommands = useRecoilValue(commandMenuCommandsState);
   const { closeKeyboardShortcutMenu } = useKeyboardShortcutMenu();
 
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {

packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx

@@ -27,9 +27,9 @@ const meta: Meta<typeof CommandMenu> = {
   component: CommandMenu,
   decorators: [
     (Story) => {
-      const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState());
+      const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
       const setCurrentWorkspaceMember = useSetRecoilState(
-        currentWorkspaceMemberState(),
+        currentWorkspaceMemberState,
       );
       const { addToCommandMenu, setToInitialCommandMenu, openCommandMenu } =
         useCommandMenu();

packages/twenty-front/src/modules/command-menu/hooks/__test__/useCommandMenu.test.tsx

@@ -25,7 +25,7 @@ const renderHooks = () => {
       const commandMenu = useCommandMenu();
       const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);
       const [commandMenuCommands, setCommandMenuCommands] = useRecoilState(
-        commandMenuCommandsState(),
+        commandMenuCommandsState,
       );
 
       return {

packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts

@@ -17,7 +17,7 @@ import { Command } from '../types/Command';
 export const useCommandMenu = () => {
   const navigate = useNavigate();
   const setIsCommandMenuOpened = useSetRecoilState(isCommandMenuOpenedState);
-  const setCommands = useSetRecoilState(commandMenuCommandsState());
+  const setCommands = useSetRecoilState(commandMenuCommandsState);
   const { resetSelectedItem } = useSelectableList('command-menu-list');
   const {
     setHotkeyScopeAndMemorizePreviousScope,
@@ -52,7 +52,7 @@ export const useCommandMenu = () => {
           .getLoadable(isCommandMenuOpenedState)
           .getValue();
 
-        set(commandMenuSearchState(), '');
+        set(commandMenuSearchState, '');
 
         if (isCommandMenuOpened) {
           closeCommandMenu();

packages/twenty-front/src/modules/debug/components/ApolloDevLogEffect.tsx

@@ -5,7 +5,7 @@ import { useRecoilValue } from 'recoil';
 import { isDebugModeState } from '@/client-config/states/isDebugModeState';
 
 export const ApolloDevLogEffect = () => {
-  const isDebugMode = useRecoilValue(isDebugModeState());
+  const isDebugMode = useRecoilValue(isDebugModeState);
 
   useEffect(() => {
     if (isDebugMode) {

packages/twenty-front/src/modules/debug/components/RecoilDebugObserver.tsx

@@ -15,7 +15,7 @@ const formatTitle = (stateName: string) => {
 };
 
 export const RecoilDebugObserverEffect = () => {
-  const isDebugMode = useRecoilValue(isDebugModeState());
+  const isDebugMode = useRecoilValue(isDebugModeState);
 
   useRecoilTransactionObserver_UNSTABLE(({ snapshot }) => {
     if (!isDebugMode) {

packages/twenty-front/src/modules/error-handler/components/SentryInitiEffect.tsx

@@ -11,11 +11,11 @@ import { REACT_APP_SERVER_BASE_URL } from '~/config';
 import { isDefined } from '~/utils/isDefined';
 
 export const SentryInitEffect = () => {
-  const sentryConfig = useRecoilValue(sentryConfigState());
+  const sentryConfig = useRecoilValue(sentryConfigState);
 
-  const currentUser = useRecoilValue(currentUserState());
+  const currentUser = useRecoilValue(currentUserState);
-  const currentWorkspace = useRecoilValue(currentWorkspaceState());
+  const currentWorkspace = useRecoilValue(currentWorkspaceState);
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
 
   const [isSentryInitialized, setIsSentryInitialized] = useState(false);
 

packages/twenty-front/src/modules/favorites/hooks/__tests__/useFavorites.test.tsx

@@ -46,11 +46,11 @@ describe('useFavorites', () => {
     const { result } = renderHook(
       () => {
         const setCurrentWorkspaceMember = useSetRecoilState(
-          currentWorkspaceMemberState(),
+          currentWorkspaceMemberState,
         );
         setCurrentWorkspaceMember(mockWorkspaceMember);
 
-        const setMetadataItems = useSetRecoilState(objectMetadataItemsState());
+        const setMetadataItems = useSetRecoilState(objectMetadataItemsState);
         setMetadataItems(mockObjectMetadataItems);
 
         return useFavorites();
@@ -67,11 +67,11 @@ describe('useFavorites', () => {
     const { result } = renderHook(
       () => {
         const setCurrentWorkspaceMember = useSetRecoilState(
-          currentWorkspaceMemberState(),
+          currentWorkspaceMemberState,
         );
         setCurrentWorkspaceMember(mockWorkspaceMember);
 
-        const setMetadataItems = useSetRecoilState(objectMetadataItemsState());
+        const setMetadataItems = useSetRecoilState(objectMetadataItemsState);
         setMetadataItems(mockObjectMetadataItems);
 
         return useFavorites();
@@ -95,11 +95,11 @@ describe('useFavorites', () => {
     const { result } = renderHook(
       () => {
         const setCurrentWorkspaceMember = useSetRecoilState(
-          currentWorkspaceMemberState(),
+          currentWorkspaceMemberState,
         );
         setCurrentWorkspaceMember(mockWorkspaceMember);
 
-        const setMetadataItems = useSetRecoilState(objectMetadataItemsState());
+        const setMetadataItems = useSetRecoilState(objectMetadataItemsState);
         setMetadataItems(mockObjectMetadataItems);
 
         return useFavorites();
@@ -120,11 +120,11 @@ describe('useFavorites', () => {
     const { result } = renderHook(
       () => {
         const setCurrentWorkspaceMember = useSetRecoilState(
-          currentWorkspaceMemberState(),
+          currentWorkspaceMemberState,
         );
         setCurrentWorkspaceMember(mockWorkspaceMember);
 
-        const setMetadataItems = useSetRecoilState(objectMetadataItemsState());
+        const setMetadataItems = useSetRecoilState(objectMetadataItemsState);
         setMetadataItems(mockObjectMetadataItems);
 
         return useFavorites();

packages/twenty-front/src/modules/favorites/hooks/useFavorites.ts

@@ -16,7 +16,7 @@ import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { isDefined } from '~/utils/isDefined';
 
 export const useFavorites = () => {
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
 
   const { objectMetadataItem: favoriteObjectMetadataItem } =
     useObjectMetadataItem({

packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx

@@ -28,12 +28,12 @@ export const AppNavigationDrawer = ({
   const isMobile = useIsMobile();
   const isSettingsPage = useIsSettingsPage();
   const currentMobileNavigationDrawer = useRecoilValue(
-    currentMobileNavigationDrawerState(),
+    currentMobileNavigationDrawerState,
   );
   const setIsNavigationDrawerOpen = useSetRecoilState(
     isNavigationDrawerOpenState,
   );
-  const currentWorkspace = useRecoilValue(currentWorkspaceState());
+  const currentWorkspace = useRecoilValue(currentWorkspaceState);
 
   const isSettingsDrawer = isMobile
     ? currentMobileNavigationDrawer === 'settings'

packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx

@@ -24,13 +24,11 @@ export const MainNavigationDrawerItems = () => {
   const isMobile = useIsMobile();
   const { toggleCommandMenu } = useCommandMenu();
   const isTasksPage = useIsTasksPage();
-  const currentUserDueTaskCount = useRecoilValue(
+  const currentUserDueTaskCount = useRecoilValue(currentUserDueTaskCountState);
-    currentUserDueTaskCountState(),
-  );
   const navigate = useNavigate();
   const location = useLocation();
   const setNavigationMemorizedUrl = useSetRecoilState(
-    navigationMemorizedUrlState(),
+    navigationMemorizedUrlState,
   );
 
   return (

packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx

@@ -30,7 +30,7 @@ export const MobileNavigationBar = () => {
     isNavigationDrawerOpenState,
   );
   const [currentMobileNavigationDrawer, setCurrentMobileNavigationDrawer] =
-    useRecoilState(currentMobileNavigationDrawerState());
+    useRecoilState(currentMobileNavigationDrawerState);
 
   const activeItemName = isNavigationDrawerOpen
     ? currentMobileNavigationDrawer

packages/twenty-front/src/modules/navigation/components/__stories__/AppNavigationDrawer.stories.tsx

@@ -24,7 +24,7 @@ const MobileNavigationDrawerStateSetterEffect = ({
     isNavigationDrawerOpenState,
   );
   const setCurrentMobileNavigationDrawer = useSetRecoilState(
-    currentMobileNavigationDrawerState(),
+    currentMobileNavigationDrawerState,
   );
 
   useEffect(() => {

packages/twenty-front/src/modules/object-metadata/components/ApolloMetadataClientProvider.tsx

@@ -13,7 +13,7 @@ export const ApolloMetadataClientProvider = ({
 }: {
   children: React.ReactNode;
 }) => {
-  const [tokenPair] = useRecoilState(tokenPairState());
+  const [tokenPair] = useRecoilState(tokenPairState);
   const apolloMetadataClient = useMemo(() => {
     if (isNonEmptyString(tokenPair?.accessToken.token)) {
       return new ApolloClient({

packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataItemsLoadEffect.tsx

@@ -10,7 +10,7 @@ export const ObjectMetadataItemsLoadEffect = () => {
     useFindManyObjectMetadataItems();
 
   const [objectMetadataItems, setObjectMetadataItems] = useRecoilState(
-    objectMetadataItemsState(),
+    objectMetadataItemsState,
   );
 
   useEffect(() => {

packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataItemsProvider.tsx

@@ -9,8 +9,8 @@ import { RelationPickerScope } from '@/object-record/relation-picker/scopes/Rela
 export const ObjectMetadataItemsProvider = ({
   children,
 }: React.PropsWithChildren) => {
-  const objectMetadataItems = useRecoilValue(objectMetadataItemsState());
+  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
 
   const shouldDisplayChildren =
     objectMetadataItems.length > 0 || !currentWorkspaceMember;

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

@@ -12,7 +12,7 @@ describe('useFilterOutUnexistingObjectMetadataItems', () => {
   it('should work as expected', async () => {
     const { result } = renderHook(
       () => {
-        const setMetadataItems = useSetRecoilState(objectMetadataItemsState());
+        const setMetadataItems = useSetRecoilState(objectMetadataItemsState);
 
         setMetadataItems(mockObjectMetadataItems.slice(1));
         return useFilterOutUnexistingObjectMetadataItems();

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

@@ -17,7 +17,7 @@ describe('useGetObjectRecordIdentifierByNameSingular', () => {
         record: any;
         objectNameSingular: string;
       }) => {
-        const setMetadataItems = useSetRecoilState(objectMetadataItemsState());
+        const setMetadataItems = useSetRecoilState(objectMetadataItemsState);
 
         setMetadataItems(mockObjectMetadataItems);
 

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

@@ -31,7 +31,7 @@ describe('useGetRelationMetadata', () => {
 
     const { result } = renderHook(
       () => {
-        const setMetadataItems = useSetRecoilState(objectMetadataItemsState());
+        const setMetadataItems = useSetRecoilState(objectMetadataItemsState);
 
         useEffect(() => {
           setMetadataItems(objectMetadataItems);

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

@@ -44,7 +44,7 @@ describe('useObjectMetadataItemForSettings', () => {
   it('should findActiveObjectMetadataItemBySlug', async () => {
     const { result } = renderHook(
       () => {
-        const setMetadataItems = useSetRecoilState(objectMetadataItemsState());
+        const setMetadataItems = useSetRecoilState(objectMetadataItemsState);
         setMetadataItems(mockObjectMetadataItems);
 
         return useObjectMetadataItemForSettings();
@@ -64,7 +64,7 @@ describe('useObjectMetadataItemForSettings', () => {
   it('should findObjectMetadataItemById', async () => {
     const { result } = renderHook(
       () => {
-        const setMetadataItems = useSetRecoilState(objectMetadataItemsState());
+        const setMetadataItems = useSetRecoilState(objectMetadataItemsState);
         setMetadataItems(mockObjectMetadataItems);
 
         return useObjectMetadataItemForSettings();
@@ -86,7 +86,7 @@ describe('useObjectMetadataItemForSettings', () => {
   it('should findObjectMetadataItemByNamePlural', async () => {
     const { result } = renderHook(
       () => {
-        const setMetadataItems = useSetRecoilState(objectMetadataItemsState());
+        const setMetadataItems = useSetRecoilState(objectMetadataItemsState);
         setMetadataItems(mockObjectMetadataItems);
 
         return useObjectMetadataItemForSettings();

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

@@ -28,7 +28,10 @@ export const useCreateOneObjectMetadataItem = () => {
         input: { object: input },
       },
       awaitRefetchQueries: true,
-      refetchQueries: [getOperationName(FIND_MANY_OBJECT_METADATA_ITEMS) ?? ''],
+      refetchQueries: [
+        getOperationName(FIND_MANY_OBJECT_METADATA_ITEMS) ?? '',
+        'FindManyRecordsMultipleMetadataItems',
+      ],
     });
   };
 

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

@@ -5,7 +5,7 @@ import { getObjectRecordIdentifier } from '@/object-metadata/utils/getObjectReco
 import { ObjectRecordIdentifier } from '@/object-record/types/ObjectRecordIdentifier';
 
 export const useGetObjectRecordIdentifierByNameSingular = () => {
-  const objectMetadataItems = useRecoilValue(objectMetadataItemsState());
+  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
 
   return (record: any, objectNameSingular: string): ObjectRecordIdentifier => {
     const objectMetadataItem = objectMetadataItems.find(

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

@@ -42,7 +42,7 @@ export const useObjectMetadataItem = (
   depth?: number,
   eagerLoadedRelations?: Record<string, any>,
 ) => {
-  const currentWorkspace = useRecoilValue(currentWorkspaceState());
+  const currentWorkspace = useRecoilValue(currentWorkspaceState);
 
   const mockObjectMetadataItems = getObjectMetadataItemsMock();
 
@@ -53,7 +53,7 @@ export const useObjectMetadataItem = (
     }),
   );
 
-  let objectMetadataItems = useRecoilValue(objectMetadataItemsState());
+  let objectMetadataItems = useRecoilValue(objectMetadataItemsState);
 
   if (currentWorkspace?.activationStatus !== 'active') {
     objectMetadataItem =

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

@@ -5,7 +5,7 @@ import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadat
 import { getObjectSlug } from '../utils/getObjectSlug';
 
 export const useObjectMetadataItemForSettings = () => {
-  const objectMetadataItems = useRecoilValue(objectMetadataItemsState());
+  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
 
   const activeObjectMetadataItems = objectMetadataItems.filter(
     ({ isActive, isSystem }) => isActive && !isSystem,

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

@@ -12,7 +12,7 @@ import { ObjectMetadataItemIdentifier } from '../types/ObjectMetadataItemIdentif
 export const useObjectMetadataItemOnly = ({
   objectNameSingular,
 }: ObjectMetadataItemIdentifier) => {
-  const currentWorkspace = useRecoilValue(currentWorkspaceState());
+  const currentWorkspace = useRecoilValue(currentWorkspaceState);
 
   const mockObjectMetadataItems = getObjectMetadataItemsMock();
 
@@ -23,7 +23,7 @@ export const useObjectMetadataItemOnly = ({
     }),
   );
 
-  let objectMetadataItems = useRecoilValue(objectMetadataItemsState());
+  let objectMetadataItems = useRecoilValue(objectMetadataItemsState);
 
   if (currentWorkspace?.activationStatus !== 'active') {
     objectMetadataItem =

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

@@ -3,7 +3,7 @@ import { useRecoilValue } from 'recoil';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 
 export const useObjectMetadataItems = () => {
-  const objectMetadataItems = useRecoilValue(objectMetadataItemsState());
+  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
 
   return {
     objectMetadataItems,

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

@@ -10,7 +10,7 @@ export const useObjectNamePluralFromSingular = ({
 }: {
   objectNameSingular: string;
 }) => {
-  const currentWorkspace = useRecoilValue(currentWorkspaceState());
+  const currentWorkspace = useRecoilValue(currentWorkspaceState);
   const mockObjectMetadataItems = getObjectMetadataItemsMock();
 
   let objectMetadataItem = useRecoilValue(

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

@@ -10,7 +10,7 @@ export const useObjectNameSingularFromPlural = ({
 }: {
   objectNamePlural: string;
 }) => {
-  const currentWorkspace = useRecoilValue(currentWorkspaceState());
+  const currentWorkspace = useRecoilValue(currentWorkspaceState);
 
   const mockObjectMetadataItems = getObjectMetadataItemsMock();
 

packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemFamilySelector.ts

@@ -16,7 +16,7 @@ export const objectMetadataItemFamilySelector = selectorFamily<
   get:
     ({ objectNameType, objectName }: ObjectMetadataItemSelector) =>
     ({ get }) => {
-      const objectMetadataItems = get(objectMetadataItemsState());
+      const objectMetadataItems = get(objectMetadataItemsState);
 
       if (objectNameType === 'singular') {
         return (

packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsByNamePluralMapSelector.ts

@@ -8,7 +8,7 @@ export const objectMetadataItemsByNamePluralMapSelector = selector<
 >({
   key: 'objectMetadataItemsByNamePluralMapSelector',
   get: ({ get }) => {
-    const objectMetadataItems = get(objectMetadataItemsState());
+    const objectMetadataItems = get(objectMetadataItemsState);
 
     return new Map(
       objectMetadataItems.map((objectMetadataItem) => [

packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsByNameSingularMapSelector.ts

@@ -8,7 +8,7 @@ export const objectMetadataItemsByNameSingularMapSelector = selector<
 >({
   key: 'objectMetadataItemsByNameSingularMapSelector',
   get: ({ get }) => {
-    const objectMetadataItems = get(objectMetadataItemsState());
+    const objectMetadataItems = get(objectMetadataItemsState);
 
     return new Map(
       objectMetadataItems.map((objectMetadataItem) => [

packages/twenty-front/src/modules/object-record/cache/hooks/useAddRecordInCache.ts

@@ -15,7 +15,7 @@ export const useAddRecordInCache = ({
 }: {
   objectMetadataItem: ObjectMetadataItem;
 }) => {
-  const objectMetadataItems = useRecoilValue(objectMetadataItemsState());
+  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
   const apolloClient = useApolloClient();
 
   const { injectIntoFindOneRecordQueryCache } =

packages/twenty-front/src/modules/object-record/cache/hooks/useGetRecordFromCache.ts

@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import { gql, useApolloClient } from '@apollo/client';
 import { useRecoilValue } from 'recoil';
 
@@ -13,21 +14,22 @@ export const useGetRecordFromCache = ({
 }: {
   objectMetadataItem: ObjectMetadataItem;
 }) => {
-  const objectMetadataItems = useRecoilValue(objectMetadataItemsState());
+  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
 
   const apolloClient = useApolloClient();
 
-  return <CachedObjectRecord extends ObjectRecord = ObjectRecord>(
+  return useCallback(
-    recordId: string,
+    <CachedObjectRecord extends ObjectRecord = ObjectRecord>(
-    cache = apolloClient.cache,
+      recordId: string,
-  ) => {
+      cache = apolloClient.cache,
-    if (isUndefinedOrNull(objectMetadataItem)) {
+    ) => {
-      return null;
+      if (isUndefinedOrNull(objectMetadataItem)) {
-    }
+        return null;
+      }
 
-    const capitalizedObjectName = capitalize(objectMetadataItem.nameSingular);
+      const capitalizedObjectName = capitalize(objectMetadataItem.nameSingular);
 
-    const cacheReadFragment = gql`
+      const cacheReadFragment = gql`
       fragment ${capitalizedObjectName}Fragment on ${capitalizedObjectName} ${mapObjectMetadataToGraphQLQuery(
         {
           objectMetadataItems,
@@ -36,14 +38,16 @@ export const useGetRecordFromCache = ({
       )}
     `;
 
-    const cachedRecordId = cache.identify({
+      const cachedRecordId = cache.identify({
-      __typename: capitalize(objectMetadataItem.nameSingular),
+        __typename: capitalize(objectMetadataItem.nameSingular),
-      id: recordId,
+        id: recordId,
-    });
+      });
 
-    return cache.readFragment<CachedObjectRecord & { __typename: string }>({
+      return cache.readFragment<CachedObjectRecord & { __typename: string }>({
-      id: cachedRecordId,
+        id: cachedRecordId,
-      fragment: cacheReadFragment,
+        fragment: cacheReadFragment,
-    });
+      });
-  };
+    },
+    [objectMetadataItem, objectMetadataItems, apolloClient],
+  );
 };

packages/twenty-front/src/modules/object-record/cache/utils/getRecordEdgeFromRecord.ts

@@ -17,7 +17,8 @@ export const getRecordEdgeFromRecord = <T extends ObjectRecord>({
         return [
           key,
           getRecordConnectionFromRecords({
-            objectNameSingular: key,
+            // Todo: this is a ugly and broken hack to get the singular, we need to infer this from metadata
+            objectNameSingular: key.slice(0, -1),
             records: value as ObjectRecord[],
           }),
         ];