Refacto views (#10272)

In this huge (sorry!) PR: - introducing objectMetadataItem in contextStore instead of objectMetadataId which is more convenient - splitting some big hooks into smaller parts to avoid re-renders - removing Effects to avoid re-renders (especially onViewChange) - making the view prefetch separate from favorites to avoid re-renders - making the view prefetch load a state and add selectors on top of it to avoir re-renders As a result, the performance is WAY better (I suspect the favorite implementation to trigger a lot of re-renders unfortunately). However, we are still facing a random app freeze on view creation. I could not investigate the root cause. As this seems to be already there in the precedent release, we can move forward but this seems a urgent follow up to me ==> EDIT: I've found the root cause after a few ours of deep dive... an infinite loop in RecordTableNoRecordGroupBodyEffect... prastoin edit: close https://github.com/twentyhq/twenty/issues/10253 --------- Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com> Co-authored-by: prastoin <paul@twenty.com>
2025-02-18 13:51:07 +01:00
parent 103dff4bd0
commit fb42046033
125 changed files with 1607 additions and 1582 deletions
--- a/packages/twenty-front/src/modules/views/hooks/tests/useApplyCurrentViewFiltersToCurrentRecordFilters.test.tsx
+++ b/packages/twenty-front/src/modules/views/hooks/tests/useApplyCurrentViewFiltersToCurrentRecordFilters.test.tsx
@ -1,20 +1,22 @@
-import { act, renderHook } from '@testing-library/react';
+import { renderHook } from '@testing-library/react';

+import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { getFilterTypeFromFieldType } from '@/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions';
 import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
 import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
-import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
+import { AGGREGATE_OPERATIONS } from '@/object-record/record-table/constants/AggregateOperations';
+import { prefetchViewsState } from '@/prefetch/states/prefetchViewsState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { currentViewIdComponentState } from '@/views/states/currentViewIdComponentState';
+import { View } from '@/views/types/View';
 import { ViewFilter } from '@/views/types/ViewFilter';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
+import { ViewType } from '@/views/types/ViewType';
+import { act } from 'react';
 import { isDefined } from 'twenty-shared';
 import { getJestMetadataAndApolloMocksAndActionMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndContextStoreWrapper';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
 import { useApplyCurrentViewFiltersToCurrentRecordFilters } from '../useApplyCurrentViewFiltersToCurrentRecordFilters';

-jest.mock('@/prefetch/hooks/usePrefetchedData');
-
 const mockObjectMetadataItemNameSingular = 'company';

 describe('useApplyCurrentViewFiltersToCurrentRecordFilters', () => {
@ -41,18 +43,26 @@ describe('useApplyCurrentViewFiltersToCurrentRecordFilters', () => {
    positionInViewFilterGroup: 0,
  };

-  const mockView = {
+  const mockView: View = {
    id: 'view-1',
    name: 'Test View',
    objectMetadataId: mockObjectMetadataItem.id,
    viewFilters: [mockViewFilter],
+    type: ViewType.Table,
+    key: null,
+    isCompact: false,
+    viewFields: [],
+    viewGroups: [],
+    viewSorts: [],
+    kanbanFieldMetadataId: '',
+    kanbanAggregateOperation: AGGREGATE_OPERATIONS.count,
+    icon: '',
+    kanbanAggregateOperationFieldMetadataId: '',
+    position: 0,
+    __typename: 'View',
  };

  it('should apply filters from current view', () => {
-    (usePrefetchedData as jest.Mock).mockReturnValue({
-      records: [mockView],
-    });
-
    const { result } = renderHook(
      () => {
        const { applyCurrentViewFiltersToCurrentRecordFilters } =
@ -75,11 +85,12 @@ describe('useApplyCurrentViewFiltersToCurrentRecordFilters', () => {
            mockObjectMetadataItemNameSingular,
          onInitializeRecoilSnapshot: (snapshot) => {
            snapshot.set(
-              currentViewIdComponentState.atomFamily({
+              contextStoreCurrentViewIdComponentState.atomFamily({
                instanceId: 'instanceId',
              }),
              mockView.id,
            );
+            snapshot.set(prefetchViewsState, [mockView]);
          },
        }),
      },
@ -105,10 +116,6 @@ describe('useApplyCurrentViewFiltersToCurrentRecordFilters', () => {
  });

  it('should not apply filters when current view is not found', () => {
-    (usePrefetchedData as jest.Mock).mockReturnValue({
-      records: [],
-    });
-
    const { result } = renderHook(
      () => {
        const { applyCurrentViewFiltersToCurrentRecordFilters } =
@ -131,11 +138,12 @@ describe('useApplyCurrentViewFiltersToCurrentRecordFilters', () => {
            mockObjectMetadataItemNameSingular,
          onInitializeRecoilSnapshot: (snapshot) => {
            snapshot.set(
-              currentViewIdComponentState.atomFamily({
+              contextStoreCurrentViewIdComponentState.atomFamily({
                instanceId: 'instanceId',
              }),
              mockView.id,
            );
+            snapshot.set(prefetchViewsState, []);
          },
        }),
      },
@ -149,15 +157,6 @@ describe('useApplyCurrentViewFiltersToCurrentRecordFilters', () => {
  });

  it('should handle view with empty filters', () => {
-    const viewWithNoFilters = {
-      ...mockView,
-      viewFilters: [],
-    };
-
-    (usePrefetchedData as jest.Mock).mockReturnValue({
-      records: [viewWithNoFilters],
-    });
-
    const { result } = renderHook(
      () => {
        const { applyCurrentViewFiltersToCurrentRecordFilters } =
@ -180,11 +179,14 @@ describe('useApplyCurrentViewFiltersToCurrentRecordFilters', () => {
            mockObjectMetadataItemNameSingular,
          onInitializeRecoilSnapshot: (snapshot) => {
            snapshot.set(
-              currentViewIdComponentState.atomFamily({
+              contextStoreCurrentViewIdComponentState.atomFamily({
                instanceId: 'instanceId',
              }),
              mockView.id,
            );
+            snapshot.set(prefetchViewsState, [
+              { ...mockView, viewFilters: [] },
+            ]);
          },
        }),
      },
--- a/packages/twenty-front/src/modules/views/hooks/useApplyCurrentViewFiltersToCurrentRecordFilters.ts
+++ b/packages/twenty-front/src/modules/views/hooks/useApplyCurrentViewFiltersToCurrentRecordFilters.ts
@ -1,19 +1,18 @@
+import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { useFilterableFieldMetadataItemsInRecordIndexContext } from '@/object-record/record-filter/hooks/useFilterableFieldMetadataItemsInRecordIndexContext';
 import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
-import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
-import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
+import { prefetchViewFromViewIdFamilySelector } from '@/prefetch/states/selector/prefetchViewFromViewIdFamilySelector';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
-import { currentViewIdComponentState } from '@/views/states/currentViewIdComponentState';
-import { View } from '@/views/types/View';
 import { mapViewFiltersToFilters } from '@/views/utils/mapViewFiltersToFilters';
+import { useRecoilCallback } from 'recoil';

 import { isDefined } from 'twenty-shared';

 export const useApplyCurrentViewFiltersToCurrentRecordFilters = () => {
-  const { records: views } = usePrefetchedData<View>(PrefetchKey.AllViews);
-
-  const currentViewId = useRecoilComponentValueV2(currentViewIdComponentState);
+  const currentViewId = useRecoilComponentValueV2(
+    contextStoreCurrentViewIdComponentState,
+  );

  const setCurrentRecordFilters = useSetRecoilComponentStateV2(
    currentRecordFiltersComponentState,
@ -22,18 +21,28 @@ export const useApplyCurrentViewFiltersToCurrentRecordFilters = () => {
  const { filterableFieldMetadataItems } =
    useFilterableFieldMetadataItemsInRecordIndexContext();

-  const applyCurrentViewFiltersToCurrentRecordFilters = () => {
-    const currentView = views.find((view) => view.id === currentViewId);
+  const applyCurrentViewFiltersToCurrentRecordFilters = useRecoilCallback(
+    ({ snapshot }) =>
+      () => {
+        const currentView = snapshot
+          .getLoadable(
+            prefetchViewFromViewIdFamilySelector({
+              viewId: currentViewId ?? '',
+            }),
+          )
+          .getValue();

-    if (isDefined(currentView)) {
-      setCurrentRecordFilters(
-        mapViewFiltersToFilters(
-          currentView.viewFilters,
-          filterableFieldMetadataItems,
-        ),
-      );
-    }
-  };
+        if (isDefined(currentView)) {
+          setCurrentRecordFilters(
+            mapViewFiltersToFilters(
+              currentView.viewFilters,
+              filterableFieldMetadataItems,
+            ),
+          );
+        }
+      },
+    [currentViewId, filterableFieldMetadataItems, setCurrentRecordFilters],
+  );

  return {
    applyCurrentViewFiltersToCurrentRecordFilters,
--- a/packages/twenty-front/src/modules/views/hooks/useCreateViewFromCurrentView.ts
+++ b/packages/twenty-front/src/modules/views/hooks/useCreateViewFromCurrentView.ts
@ -1,6 +1,9 @@
+import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
+import { useLazyFindManyRecords } from '@/object-record/hooks/useLazyFindManyRecords';
 import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
+import { prefetchViewFromViewIdFamilySelector } from '@/prefetch/states/selector/prefetchViewFromViewIdFamilySelector';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { usePersistViewFieldRecords } from '@/views/hooks/internal/usePersistViewFieldRecords';
@ -11,9 +14,7 @@ import { usePersistViewSortRecords } from '@/views/hooks/internal/usePersistView
 import { useGetViewFilterGroupsCombined } from '@/views/hooks/useGetCombinedViewFilterGroups';
 import { useGetViewFiltersCombined } from '@/views/hooks/useGetCombinedViewFilters';
 import { useGetViewSortsCombined } from '@/views/hooks/useGetCombinedViewSorts';
-import { useGetViewFromCache } from '@/views/hooks/useGetViewFromCache';
-import { currentViewIdComponentState } from '@/views/states/currentViewIdComponentState';
-import { isPersistingViewFieldsComponentState } from '@/views/states/isPersistingViewFieldsComponentState';
+import { isPersistingViewFieldsState } from '@/views/states/isPersistingViewFieldsState';
 import { GraphQLView } from '@/views/types/GraphQLView';
 import { View } from '@/views/types/View';
 import { ViewGroup } from '@/views/types/ViewGroup';
@ -25,17 +26,10 @@ import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';

 export const useCreateViewFromCurrentView = (viewBarComponentId?: string) => {
  const currentViewIdCallbackState = useRecoilComponentCallbackStateV2(
-    currentViewIdComponentState,
+    contextStoreCurrentViewIdComponentState,
    viewBarComponentId,
  );

-  const isPersistingViewFieldsCallbackState = useRecoilComponentCallbackStateV2(
-    isPersistingViewFieldsComponentState,
-    viewBarComponentId,
-  );
-
-  const { getViewFromCache } = useGetViewFromCache();
-
  const { createOneRecord } = useCreateOneRecord<View>({
    objectNameSingular: CoreObjectNameSingular.View,
  });
@ -58,6 +52,11 @@ export const useCreateViewFromCurrentView = (viewBarComponentId?: string) => {

  const { objectMetadataItem } = useRecordIndexContextOrThrow();

+  const { findManyRecords } = useLazyFindManyRecords({
+    objectNameSingular: CoreObjectNameSingular.View,
+    fetchPolicy: 'network-only',
+  });
+
  const createViewFromCurrentView = useRecoilCallback(
    ({ snapshot, set }) =>
      async (
@ -84,14 +83,19 @@ export const useCreateViewFromCurrentView = (viewBarComponentId?: string) => {
          return;
        }

-        // Here we might instead want to get view from unsaved filters ?
-        const sourceView = await getViewFromCache(currentViewId);
+        const sourceView = snapshot
+          .getLoadable(
+            prefetchViewFromViewIdFamilySelector({
+              viewId: currentViewId,
+            }),
+          )
+          .getValue();

        if (!isDefined(sourceView)) {
          return;
        }

-        set(isPersistingViewFieldsCallbackState, true);
+        set(isPersistingViewFieldsState, true);

        const newView = await createOneRecord({
          id: id ?? v4(),
@ -123,7 +127,7 @@ export const useCreateViewFromCurrentView = (viewBarComponentId?: string) => {
          }

          const viewGroupsToCreate =
-            objectMetadataItem?.fields
+            objectMetadataItem.fields
              ?.find((field) => field.id === kanbanFieldMetadataId)
              ?.options?.map(
                (option, index) =>
@ -169,21 +173,21 @@ export const useCreateViewFromCurrentView = (viewBarComponentId?: string) => {
          );
        }

-        set(isPersistingViewFieldsCallbackState, false);
+        await findManyRecords();
+        set(isPersistingViewFieldsState, false);
      },
    [
-      objectMetadataItem,
-      createViewSortRecords,
-      createViewFilterRecords,
+      currentViewIdCallbackState,
      createOneRecord,
      createViewFieldRecords,
-      getViewSortsCombined,
-      getViewFiltersCombined,
-      getViewFilterGroupsCombined,
-      currentViewIdCallbackState,
-      getViewFromCache,
-      isPersistingViewFieldsCallbackState,
+      findManyRecords,
+      objectMetadataItem.fields,
      createViewGroupRecords,
+      getViewFilterGroupsCombined,
+      getViewFiltersCombined,
+      getViewSortsCombined,
+      createViewSortRecords,
+      createViewFilterRecords,
      createViewFilterGroupRecords,
    ],
  );
--- a/packages/twenty-front/src/modules/views/hooks/useDeleteCombinedViewFilters.ts
+++ b/packages/twenty-front/src/modules/views/hooks/useDeleteCombinedViewFilters.ts
@ -1,9 +1,9 @@
 import { useRecoilCallback } from 'recoil';

+import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
-import { useGetViewFromCache } from '@/views/hooks/useGetViewFromCache';
-import { currentViewIdComponentState } from '@/views/states/currentViewIdComponentState';
+import { useGetViewFromPrefetchState } from '@/views/hooks/useGetViewFromPrefetchState';
 import { unsavedToDeleteViewFilterIdsComponentFamilyState } from '@/views/states/unsavedToDeleteViewFilterIdsComponentFamilyState';
 import { unsavedToUpsertViewFiltersComponentFamilyState } from '@/views/states/unsavedToUpsertViewFiltersComponentFamilyState';
 import { isDefined } from 'twenty-shared';
@ -22,11 +22,11 @@ export const useDeleteCombinedViewFilters = (viewBarComponentId?: string) => {
    );

  const currentViewIdCallbackState = useRecoilComponentCallbackStateV2(
-    currentViewIdComponentState,
+    contextStoreCurrentViewIdComponentState,
    viewBarComponentId,
  );

-  const { getViewFromCache } = useGetViewFromCache();
+  const { getViewFromPrefetchState } = useGetViewFromPrefetchState();

  const deleteCombinedViewFilter = useRecoilCallback(
    ({ snapshot, set }) =>
@ -50,7 +50,7 @@ export const useDeleteCombinedViewFilters = (viewBarComponentId?: string) => {
          return;
        }

-        const currentView = await getViewFromCache(currentViewId);
+        const currentView = await getViewFromPrefetchState(currentViewId);

        if (!currentView) {
          return;
@ -89,7 +89,7 @@ export const useDeleteCombinedViewFilters = (viewBarComponentId?: string) => {
      },
    [
      currentViewIdCallbackState,
-      getViewFromCache,
+      getViewFromPrefetchState,
      unsavedToDeleteViewFilterIdsCallbackState,
      unsavedToUpsertViewFiltersCallbackState,
    ],
--- a/packages/twenty-front/src/modules/views/hooks/useDeleteCombinedViewSorts.ts
+++ b/packages/twenty-front/src/modules/views/hooks/useDeleteCombinedViewSorts.ts
@ -1,17 +1,16 @@
 import { useRecoilCallback } from 'recoil';

+import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
-import { useGetViewFromCache } from '@/views/hooks/useGetViewFromCache';
-import { currentViewIdComponentState } from '@/views/states/currentViewIdComponentState';
+import { useGetViewFromPrefetchState } from '@/views/hooks/useGetViewFromPrefetchState';
 import { unsavedToDeleteViewSortIdsComponentFamilyState } from '@/views/states/unsavedToDeleteViewSortIdsComponentFamilyState';
 import { unsavedToUpsertViewSortsComponentFamilyState } from '@/views/states/unsavedToUpsertViewSortsComponentFamilyState';
 import { isDefined } from 'twenty-shared';

 export const useDeleteCombinedViewSorts = (viewBarComponentId?: string) => {
  const currentViewIdCallbackState = useRecoilComponentCallbackStateV2(
-    currentViewIdComponentState,
-    viewBarComponentId,
+    contextStoreCurrentViewIdComponentState,
  );

  const unsavedToUpsertViewSortsCallbackState =
@ -26,7 +25,7 @@ export const useDeleteCombinedViewSorts = (viewBarComponentId?: string) => {
      viewBarComponentId,
    );

-  const { getViewFromCache } = useGetViewFromCache();
+  const { getViewFromPrefetchState } = useGetViewFromPrefetchState();

  const deleteCombinedViewSort = useRecoilCallback(
    ({ snapshot, set }) =>
@ -50,7 +49,7 @@ export const useDeleteCombinedViewSorts = (viewBarComponentId?: string) => {
          unsavedToDeleteViewSortIdsCallbackState({ viewId: currentViewId }),
        );

-        const currentView = await getViewFromCache(currentViewId);
+        const currentView = await getViewFromPrefetchState(currentViewId);

        if (!currentView) {
          return;
@ -88,7 +87,7 @@ export const useDeleteCombinedViewSorts = (viewBarComponentId?: string) => {
      },
    [
      currentViewIdCallbackState,
-      getViewFromCache,
+      getViewFromPrefetchState,
      unsavedToDeleteViewSortIdsCallbackState,
      unsavedToUpsertViewSortsCallbackState,
    ],
--- a/packages/twenty-front/src/modules/views/hooks/useGetCombinedViewFilterGroups.ts
+++ b/packages/twenty-front/src/modules/views/hooks/useGetCombinedViewFilterGroups.ts
@ -1,18 +1,14 @@
 import { useRecoilCallback } from 'recoil';

-import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
-import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
+import { prefetchViewFromViewIdFamilySelector } from '@/prefetch/states/selector/prefetchViewFromViewIdFamilySelector';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { unsavedToDeleteViewFilterGroupIdsComponentFamilyState } from '@/views/states/unsavedToDeleteViewFilterGroupIdsComponentFamilyState';
 import { unsavedToUpsertViewFilterGroupsComponentFamilyState } from '@/views/states/unsavedToUpsertViewFilterGroupsComponentFamilyState';
-import { View } from '@/views/types/View';
 import { getCombinedViewFilterGroups } from '@/views/utils/getCombinedViewFilterGroups';
 import { isDefined } from 'twenty-shared';

 export const useGetViewFilterGroupsCombined = (viewBarComponentId?: string) => {
-  const { records: views } = usePrefetchedData<View>(PrefetchKey.AllViews);
-
  const unsavedToUpsertViewFilterGroupsCallbackState =
    useRecoilComponentCallbackStateV2(
      unsavedToUpsertViewFilterGroupsComponentFamilyState,
@ -28,7 +24,13 @@ export const useGetViewFilterGroupsCombined = (viewBarComponentId?: string) => {
  const getViewFilterGroupsCombined = useRecoilCallback(
    ({ snapshot }) =>
      (viewId: string) => {
-        const view = views.find((view) => view.id === viewId);
+        const view = snapshot
+          .getLoadable(
+            prefetchViewFromViewIdFamilySelector({
+              viewId,
+            }),
+          )
+          .getValue();

        if (!isDefined(view)) {
          throw new Error(
@ -55,7 +57,6 @@ export const useGetViewFilterGroupsCombined = (viewBarComponentId?: string) => {
        return combinedViewFilterGroups;
      },
    [
-      views,
      unsavedToDeleteViewFilterGroupIdsCallbackState,
      unsavedToUpsertViewFilterGroupsCallbackState,
    ],
--- a/packages/twenty-front/src/modules/views/hooks/useGetCombinedViewFilters.ts
+++ b/packages/twenty-front/src/modules/views/hooks/useGetCombinedViewFilters.ts
@ -1,18 +1,14 @@
 import { useRecoilCallback } from 'recoil';

-import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
-import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
+import { prefetchViewFromViewIdFamilySelector } from '@/prefetch/states/selector/prefetchViewFromViewIdFamilySelector';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { unsavedToDeleteViewFilterIdsComponentFamilyState } from '@/views/states/unsavedToDeleteViewFilterIdsComponentFamilyState';
 import { unsavedToUpsertViewFiltersComponentFamilyState } from '@/views/states/unsavedToUpsertViewFiltersComponentFamilyState';
-import { View } from '@/views/types/View';
 import { getCombinedViewFilters } from '@/views/utils/getCombinedViewFilters';
 import { isDefined } from 'twenty-shared';

 export const useGetViewFiltersCombined = (viewBarComponentId?: string) => {
-  const { records: views } = usePrefetchedData<View>(PrefetchKey.AllViews);
-
  const unsavedToUpsertViewFiltersCallbackState =
    useRecoilComponentCallbackStateV2(
      unsavedToUpsertViewFiltersComponentFamilyState,
@ -28,7 +24,13 @@ export const useGetViewFiltersCombined = (viewBarComponentId?: string) => {
  const getViewFiltersCombined = useRecoilCallback(
    ({ snapshot }) =>
      (viewId: string) => {
-        const view = views.find((view) => view.id === viewId);
+        const view = snapshot
+          .getLoadable(
+            prefetchViewFromViewIdFamilySelector({
+              viewId,
+            }),
+          )
+          .getValue();

        if (!isDefined(view)) {
          throw new Error(
@ -55,7 +57,6 @@ export const useGetViewFiltersCombined = (viewBarComponentId?: string) => {
        return combinedViewFilters;
      },
    [
-      views,
      unsavedToDeleteViewFilterIdsCallbackState,
      unsavedToUpsertViewFiltersCallbackState,
    ],
--- a/packages/twenty-front/src/modules/views/hooks/useGetCombinedViewSorts.ts
+++ b/packages/twenty-front/src/modules/views/hooks/useGetCombinedViewSorts.ts
@ -1,19 +1,15 @@
 import { useRecoilCallback } from 'recoil';

-import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
-import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
+import { prefetchViewFromViewIdFamilySelector } from '@/prefetch/states/selector/prefetchViewFromViewIdFamilySelector';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { unsavedToDeleteViewSortIdsComponentFamilyState } from '@/views/states/unsavedToDeleteViewSortIdsComponentFamilyState';
 import { unsavedToUpsertViewSortsComponentFamilyState } from '@/views/states/unsavedToUpsertViewSortsComponentFamilyState';
-import { View } from '@/views/types/View';
 import { getCombinedViewSorts } from '@/views/utils/getCombinedViewSorts';
 import { isDefined } from 'twenty-shared';

 // TODO: fix naming
 export const useGetViewSortsCombined = (viewBarComponentId?: string) => {
-  const { records: views } = usePrefetchedData<View>(PrefetchKey.AllViews);
-
  const unsavedToUpsertViewSortsCallbackState =
    useRecoilComponentCallbackStateV2(
      unsavedToUpsertViewSortsComponentFamilyState,
@ -29,7 +25,13 @@ export const useGetViewSortsCombined = (viewBarComponentId?: string) => {
  const getViewSortsCombined = useRecoilCallback(
    ({ snapshot }) =>
      (viewId: string) => {
-        const view = views.find((view) => view.id === viewId);
+        const view = snapshot
+          .getLoadable(
+            prefetchViewFromViewIdFamilySelector({
+              viewId,
+            }),
+          )
+          .getValue();

        if (!isDefined(view)) {
          throw new Error(
@ -56,7 +58,6 @@ export const useGetViewSortsCombined = (viewBarComponentId?: string) => {
        return combinedViewSorts;
      },
    [
-      views,
      unsavedToDeleteViewSortIdsCallbackState,
      unsavedToUpsertViewSortsCallbackState,
    ],
--- a/packages/twenty-front/src/modules/views/hooks/useGetCurrentView.ts
+++ b/packages/twenty-front/src/modules/views/hooks/useGetCurrentView.ts
@ -1,13 +1,15 @@
 import { useEffect } from 'react';

-import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
-import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
+import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
+import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
+import { prefetchIndexViewIdFromObjectMetadataItemFamilySelector } from '@/prefetch/states/selector/prefetchIndexViewIdFromObjectMetadataItemFamilySelector';
+import { prefetchViewFromViewIdFamilySelector } from '@/prefetch/states/selector/prefetchViewFromViewIdFamilySelector';
+import { prefetchViewsFromObjectMetadataItemFamilySelector } from '@/prefetch/states/selector/prefetchViewsFromObjectMetadataItemFamilySelector';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
-import { currentViewIdComponentState } from '@/views/states/currentViewIdComponentState';
 import { isCurrentViewKeyIndexComponentState } from '@/views/states/isCurrentViewIndexComponentState';
 import { unsavedToDeleteViewFilterGroupIdsComponentFamilyState } from '@/views/states/unsavedToDeleteViewFilterGroupIdsComponentFamilyState';
 import { unsavedToDeleteViewFilterIdsComponentFamilyState } from '@/views/states/unsavedToDeleteViewFilterIdsComponentFamilyState';
@ -15,12 +17,10 @@ import { unsavedToDeleteViewSortIdsComponentFamilyState } from '@/views/states/u
 import { unsavedToUpsertViewFilterGroupsComponentFamilyState } from '@/views/states/unsavedToUpsertViewFilterGroupsComponentFamilyState';
 import { unsavedToUpsertViewFiltersComponentFamilyState } from '@/views/states/unsavedToUpsertViewFiltersComponentFamilyState';
 import { unsavedToUpsertViewSortsComponentFamilyState } from '@/views/states/unsavedToUpsertViewSortsComponentFamilyState';
-import { viewObjectMetadataIdComponentState } from '@/views/states/viewObjectMetadataIdComponentState';
-import { View } from '@/views/types/View';
 import { getCombinedViewFilterGroups } from '@/views/utils/getCombinedViewFilterGroups';
 import { getCombinedViewFilters } from '@/views/utils/getCombinedViewFilters';
 import { getCombinedViewSorts } from '@/views/utils/getCombinedViewSorts';
-import { getObjectMetadataItemViews } from '@/views/utils/getObjectMetadataItemViews';
+import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared';

 export const useGetCurrentView = (viewBarInstanceId?: string) => {
@ -29,16 +29,28 @@ export const useGetCurrentView = (viewBarInstanceId?: string) => {
    viewBarInstanceId,
  );

-  const { records: views } = usePrefetchedData<View>(PrefetchKey.AllViews);
+  const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow();

  const currentViewId = useRecoilComponentValueV2(
-    currentViewIdComponentState,
-    instanceId,
+    contextStoreCurrentViewIdComponentState,
  );

-  const viewObjectMetadataId = useRecoilComponentValueV2(
-    viewObjectMetadataIdComponentState,
-    instanceId,
+  const indexViewId = useRecoilValue(
+    prefetchIndexViewIdFromObjectMetadataItemFamilySelector({
+      objectMetadataItemId: objectMetadataItem.id,
+    }),
+  );
+
+  const currentViewFromViewId = useRecoilValue(
+    prefetchViewFromViewIdFamilySelector({
+      viewId: currentViewId ?? '',
+    }),
+  );
+
+  const indexView = useRecoilValue(
+    prefetchViewFromViewIdFamilySelector({
+      viewId: indexViewId ?? '',
+    }),
  );

  const setIsCurrentViewKeyIndex = useSetRecoilComponentStateV2(
@ -46,25 +58,17 @@ export const useGetCurrentView = (viewBarInstanceId?: string) => {
    instanceId,
  );

-  const currentViewFromCurrentViewId = views.find(
-    (view) => view.id === currentViewId,
-  );
-  const indexView = views.find(
-    (view) =>
-      view.key === 'INDEX' && view.objectMetadataId === viewObjectMetadataId,
-  );
-
-  const currentView = currentViewId ? currentViewFromCurrentViewId : indexView;
-
  const viewId = currentViewId ?? indexView?.id;
+  const currentView = currentViewFromViewId ?? indexView;

  useEffect(() => {
    setIsCurrentViewKeyIndex(currentView?.key === 'INDEX');
  }, [currentView, setIsCurrentViewKeyIndex]);

-  const viewsOnCurrentObject = getObjectMetadataItemViews(
-    viewObjectMetadataId ?? '',
-    views,
+  const viewsOnCurrentObject = useRecoilValue(
+    prefetchViewsFromObjectMetadataItemFamilySelector({
+      objectMetadataItemId: objectMetadataItem.id,
+    }),
  );

  const unsavedToUpsertViewFilters = useRecoilComponentFamilyValueV2(
--- a/packages/twenty-front/src/modules/views/hooks/useGetCurrentViewOnly.ts
+++ b/packages/twenty-front/src/modules/views/hooks/useGetCurrentViewOnly.ts
@ -1,19 +1,18 @@
-import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
-import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
+import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
+import { prefetchViewFromViewIdFamilySelector } from '@/prefetch/states/selector/prefetchViewFromViewIdFamilySelector';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { currentViewIdComponentState } from '@/views/states/currentViewIdComponentState';
-import { View } from '@/views/types/View';

-import { useMemo } from 'react';
+import { useRecoilValue } from 'recoil';

 export const useGetCurrentViewOnly = () => {
-  const { records: views } = usePrefetchedData<View>(PrefetchKey.AllViews);
+  const currentViewId = useRecoilComponentValueV2(
+    contextStoreCurrentViewIdComponentState,
+  );

-  const currentViewId = useRecoilComponentValueV2(currentViewIdComponentState);
-
-  const currentView = useMemo(
-    () => views.find((view) => view.id === currentViewId),
-    [views, currentViewId],
+  const currentView = useRecoilValue(
+    prefetchViewFromViewIdFamilySelector({
+      viewId: currentViewId ?? '',
+    }),
  );

  return {
--- a/packages/twenty-front/src/modules/views/hooks/useGetViewFromCache.ts
+++ b/packages/twenty-front/src/modules/views/hooks/useGetViewFromCache.ts
@ -1,26 +0,0 @@
-import { useCallback } from 'react';
-import { useApolloClient } from '@apollo/client';
-
-import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { useGetRecordFromCache } from '@/object-record/cache/hooks/useGetRecordFromCache';
-import { View } from '@/views/types/View';
-
-export const useGetViewFromCache = () => {
-  const client = useApolloClient();
-  const cache = client.cache;
-
-  const getRecordFromCache = useGetRecordFromCache({
-    objectNameSingular: CoreObjectNameSingular.View,
-  });
-
-  const getViewFromCache = useCallback(
-    async (viewId: string) => {
-      return getRecordFromCache<View>(viewId, cache);
-    },
-    [cache, getRecordFromCache],
-  );
-
-  return {
-    getViewFromCache,
-  };
-};
--- a/packages/twenty-front/src/modules/views/hooks/useGetViewFromPrefetchState.ts
+++ b/packages/twenty-front/src/modules/views/hooks/useGetViewFromPrefetchState.ts
@ -0,0 +1,24 @@
+import { prefetchViewFromViewIdFamilySelector } from '@/prefetch/states/selector/prefetchViewFromViewIdFamilySelector';
+import { useRecoilCallback } from 'recoil';
+
+export const useGetViewFromPrefetchState = () => {
+  const getViewFromPrefetchState = useRecoilCallback(
+    ({ snapshot }) =>
+      (viewId: string) => {
+        const view = snapshot
+          .getLoadable(
+            prefetchViewFromViewIdFamilySelector({
+              viewId: viewId,
+            }),
+          )
+          .getValue();
+
+        return view;
+      },
+    [],
+  );
+
+  return {
+    getViewFromPrefetchState,
+  };
+};
--- a/packages/twenty-front/src/modules/views/hooks/useQueryVariablesFromActiveFieldsOfViewOrDefaultView.ts
+++ b/packages/twenty-front/src/modules/views/hooks/useQueryVariablesFromActiveFieldsOfViewOrDefaultView.ts
@ -6,14 +6,11 @@ import { getQueryVariablesFromView } from '@/views/utils/getQueryVariablesFromVi

 export const useQueryVariablesFromActiveFieldsOfViewOrDefaultView = ({
  objectMetadataItem,
-  viewId,
 }: {
  objectMetadataItem: ObjectMetadataItem;
-  viewId: string | null | undefined;
 }) => {
  const { view } = useViewOrDefaultViewFromPrefetchedViews({
    objectMetadataItemId: objectMetadataItem.id,
-    viewId,
  });

  const { activeFieldMetadataItems } = useActiveFieldMetadataItems({
--- a/packages/twenty-front/src/modules/views/hooks/useSaveCurrentViewFields.ts
+++ b/packages/twenty-front/src/modules/views/hooks/useSaveCurrentViewFields.ts
@ -1,29 +1,23 @@
 import { useRecoilCallback } from 'recoil';

+import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { usePersistViewFieldRecords } from '@/views/hooks/internal/usePersistViewFieldRecords';
-import { useGetViewFromCache } from '@/views/hooks/useGetViewFromCache';
-import { currentViewIdComponentState } from '@/views/states/currentViewIdComponentState';
-import { isPersistingViewFieldsComponentState } from '@/views/states/isPersistingViewFieldsComponentState';
+import { useGetViewFromPrefetchState } from '@/views/hooks/useGetViewFromPrefetchState';
+import { isPersistingViewFieldsState } from '@/views/states/isPersistingViewFieldsState';
 import { ViewField } from '@/views/types/ViewField';
 import { isDefined } from 'twenty-shared';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';

-export const useSaveCurrentViewFields = (viewBarComponentId?: string) => {
+export const useSaveCurrentViewFields = () => {
  const { createViewFieldRecords, updateViewFieldRecords } =
    usePersistViewFieldRecords();

-  const { getViewFromCache } = useGetViewFromCache();
+  const { getViewFromPrefetchState } = useGetViewFromPrefetchState();

  const currentViewIdCallbackState = useRecoilComponentCallbackStateV2(
-    currentViewIdComponentState,
-    viewBarComponentId,
-  );
-
-  const isPersistingViewFieldsCallbackState = useRecoilComponentCallbackStateV2(
-    isPersistingViewFieldsComponentState,
-    viewBarComponentId,
+    contextStoreCurrentViewIdComponentState,
  );

  const saveViewFields = useRecoilCallback(
@ -37,9 +31,9 @@ export const useSaveCurrentViewFields = (viewBarComponentId?: string) => {
          return;
        }

-        set(isPersistingViewFieldsCallbackState, true);
+        set(isPersistingViewFieldsState, true);

-        const view = await getViewFromCache(currentViewId);
+        const view = await getViewFromPrefetchState(currentViewId);

        if (isUndefinedOrNull(view)) {
          return;
@ -94,13 +88,12 @@ export const useSaveCurrentViewFields = (viewBarComponentId?: string) => {
          updateViewFieldRecords(viewFieldsToUpdate),
        ]);

-        set(isPersistingViewFieldsCallbackState, false);
+        set(isPersistingViewFieldsState, false);
      },
    [
      createViewFieldRecords,
      currentViewIdCallbackState,
-      getViewFromCache,
-      isPersistingViewFieldsCallbackState,
+      getViewFromPrefetchState,
      updateViewFieldRecords,
    ],
  );
--- a/packages/twenty-front/src/modules/views/hooks/useSaveCurrentViewFiltersAndSorts.ts
+++ b/packages/twenty-front/src/modules/views/hooks/useSaveCurrentViewFiltersAndSorts.ts
@ -1,13 +1,13 @@
 import { useRecoilCallback } from 'recoil';

+import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { usePersistViewFilterGroupRecords } from '@/views/hooks/internal/usePersistViewFilterGroupRecords';
 import { usePersistViewSortRecords } from '@/views/hooks/internal/usePersistViewSortRecords';
-import { useGetViewFromCache } from '@/views/hooks/useGetViewFromCache';
+import { useGetViewFromPrefetchState } from '@/views/hooks/useGetViewFromPrefetchState';
 import { useResetUnsavedViewStates } from '@/views/hooks/useResetUnsavedViewStates';
 import { useSaveRecordFiltersToViewFilters } from '@/views/hooks/useSaveRecordFiltersToViewFilters';
-import { currentViewIdComponentState } from '@/views/states/currentViewIdComponentState';
 import { unsavedToDeleteViewFilterGroupIdsComponentFamilyState } from '@/views/states/unsavedToDeleteViewFilterGroupIdsComponentFamilyState';
 import { unsavedToDeleteViewSortIdsComponentFamilyState } from '@/views/states/unsavedToDeleteViewSortIdsComponentFamilyState';
 import { unsavedToUpsertViewFilterGroupsComponentFamilyState } from '@/views/states/unsavedToUpsertViewFilterGroupsComponentFamilyState';
@ -18,10 +18,10 @@ import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 export const useSaveCurrentViewFiltersAndSorts = (
  viewBarComponentId?: string,
 ) => {
-  const { getViewFromCache } = useGetViewFromCache();
+  const { getViewFromPrefetchState } = useGetViewFromPrefetchState();

  const currentViewIdCallbackState = useRecoilComponentCallbackStateV2(
-    currentViewIdComponentState,
+    contextStoreCurrentViewIdComponentState,
    viewBarComponentId,
  );

@ -77,7 +77,7 @@ export const useSaveCurrentViewFiltersAndSorts = (
          unsavedToUpsertViewSortsCallbackState({ viewId }),
        );

-        const view = await getViewFromCache(viewId);
+        const view = await getViewFromPrefetchState(viewId);

        if (isUndefinedOrNull(view)) {
          return;
@ -103,7 +103,7 @@ export const useSaveCurrentViewFiltersAndSorts = (
    [
      createViewSortRecords,
      deleteViewSortRecords,
-      getViewFromCache,
+      getViewFromPrefetchState,
      unsavedToDeleteViewSortIdsCallbackState,
      unsavedToUpsertViewSortsCallbackState,
      updateViewSortRecords,
@ -123,7 +123,7 @@ export const useSaveCurrentViewFiltersAndSorts = (
          unsavedToUpsertViewFilterGroupsCallbackState({ viewId }),
        );

-        const view = await getViewFromCache(viewId);
+        const view = await getViewFromPrefetchState(viewId);

        if (isUndefinedOrNull(view)) {
          return;
@ -150,7 +150,7 @@ export const useSaveCurrentViewFiltersAndSorts = (
        await deleteViewFilterGroupRecords(unsavedToDeleteViewFilterGroupIds);
      },
    [
-      getViewFromCache,
+      getViewFromPrefetchState,
      createViewFilterGroupRecords,
      deleteViewFilterGroupRecords,
      unsavedToDeleteViewFilterGroupIdsCallbackState,
--- a/packages/twenty-front/src/modules/views/hooks/useSaveCurrentViewGroups.ts
+++ b/packages/twenty-front/src/modules/views/hooks/useSaveCurrentViewGroups.ts
@ -1,9 +1,9 @@
 import { useRecoilCallback } from 'recoil';

+import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { usePersistViewGroupRecords } from '@/views/hooks/internal/usePersistViewGroupRecords';
-import { useGetViewFromCache } from '@/views/hooks/useGetViewFromCache';
-import { currentViewIdComponentState } from '@/views/states/currentViewIdComponentState';
+import { useGetViewFromPrefetchState } from '@/views/hooks/useGetViewFromPrefetchState';
 import { ViewGroup } from '@/views/types/ViewGroup';
 import { isDefined } from 'twenty-shared';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
@ -13,10 +13,10 @@ export const useSaveCurrentViewGroups = (viewBarComponentId?: string) => {
  const { createViewGroupRecords, updateViewGroupRecords } =
    usePersistViewGroupRecords();

-  const { getViewFromCache } = useGetViewFromCache();
+  const { getViewFromPrefetchState } = useGetViewFromPrefetchState();

  const currentViewIdCallbackState = useRecoilComponentCallbackStateV2(
-    currentViewIdComponentState,
+    contextStoreCurrentViewIdComponentState,
    viewBarComponentId,
  );

@ -31,7 +31,7 @@ export const useSaveCurrentViewGroups = (viewBarComponentId?: string) => {
          return;
        }

-        const view = await getViewFromCache(currentViewId);
+        const view = await getViewFromPrefetchState(currentViewId);

        if (isUndefinedOrNull(view)) {
          return;
@ -67,7 +67,11 @@ export const useSaveCurrentViewGroups = (viewBarComponentId?: string) => {
          { ...viewGroupToSave, id: existingField.id },
        ]);
      },
-    [currentViewIdCallbackState, getViewFromCache, updateViewGroupRecords],
+    [
+      currentViewIdCallbackState,
+      getViewFromPrefetchState,
+      updateViewGroupRecords,
+    ],
  );

  const saveViewGroups = useRecoilCallback(
@ -81,7 +85,7 @@ export const useSaveCurrentViewGroups = (viewBarComponentId?: string) => {
          return;
        }

-        const view = await getViewFromCache(currentViewId);
+        const view = await getViewFromPrefetchState(currentViewId);

        if (isUndefinedOrNull(view)) {
          return;
@ -135,7 +139,7 @@ export const useSaveCurrentViewGroups = (viewBarComponentId?: string) => {
    [
      createViewGroupRecords,
      currentViewIdCallbackState,
-      getViewFromCache,
+      getViewFromPrefetchState,
      updateViewGroupRecords,
    ],
  );
--- a/packages/twenty-front/src/modules/views/hooks/useUpdateCurrentView.ts
+++ b/packages/twenty-front/src/modules/views/hooks/useUpdateCurrentView.ts
@ -1,16 +1,15 @@
 import { useRecoilCallback } from 'recoil';

+import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
-import { currentViewIdComponentState } from '@/views/states/currentViewIdComponentState';
 import { GraphQLView } from '@/views/types/GraphQLView';
 import { isDefined } from 'twenty-shared';

-export const useUpdateCurrentView = (viewBarComponentId?: string) => {
+export const useUpdateCurrentView = () => {
  const currentViewIdCallbackState = useRecoilComponentCallbackStateV2(
-    currentViewIdComponentState,
-    viewBarComponentId,
+    contextStoreCurrentViewIdComponentState,
  );

  const { updateOneRecord } = useUpdateOneRecord({
--- a/packages/twenty-front/src/modules/views/hooks/useUpdateViewAggregate.ts
+++ b/packages/twenty-front/src/modules/views/hooks/useUpdateViewAggregate.ts
@ -1,12 +1,14 @@
+import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { ExtendedAggregateOperations } from '@/object-record/record-table/types/ExtendedAggregateOperations';
 import { convertExtendedAggregateOperationToAggregateOperation } from '@/object-record/utils/convertExtendedAggregateOperationToAggregateOperation';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useUpdateView } from '@/views/hooks/useUpdateView';
-import { currentViewIdComponentState } from '@/views/states/currentViewIdComponentState';
 import { useCallback } from 'react';

 export const useUpdateViewAggregate = () => {
-  const currentViewId = useRecoilComponentValueV2(currentViewIdComponentState);
+  const currentViewId = useRecoilComponentValueV2(
+    contextStoreCurrentViewIdComponentState,
+  );
  const { updateView } = useUpdateView();
  const updateViewAggregate = useCallback(
    ({
--- a/packages/twenty-front/src/modules/views/hooks/useUpsertCombinedViewFilters.ts
+++ b/packages/twenty-front/src/modules/views/hooks/useUpsertCombinedViewFilters.ts
@ -1,10 +1,10 @@
 import { useRecoilCallback } from 'recoil';

+import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
-import { useGetViewFromCache } from '@/views/hooks/useGetViewFromCache';
-import { currentViewIdComponentState } from '@/views/states/currentViewIdComponentState';
+import { useGetViewFromPrefetchState } from '@/views/hooks/useGetViewFromPrefetchState';
 import { unsavedToDeleteViewFilterIdsComponentFamilyState } from '@/views/states/unsavedToDeleteViewFilterIdsComponentFamilyState';
 import { unsavedToUpsertViewFiltersComponentFamilyState } from '@/views/states/unsavedToUpsertViewFiltersComponentFamilyState';
 import { ViewFilter } from '@/views/types/ViewFilter';
@ -25,11 +25,11 @@ export const useUpsertCombinedViewFilters = (viewBarComponentId?: string) => {
    );

  const currentViewIdCallbackState = useRecoilComponentCallbackStateV2(
-    currentViewIdComponentState,
+    contextStoreCurrentViewIdComponentState,
    viewBarComponentId,
  );

-  const { getViewFromCache } = useGetViewFromCache();
+  const { getViewFromPrefetchState } = useGetViewFromPrefetchState();

  const upsertCombinedViewFilter = useRecoilCallback(
    ({ snapshot, set }) =>
@ -53,7 +53,7 @@ export const useUpsertCombinedViewFilters = (viewBarComponentId?: string) => {
          return;
        }

-        const currentView = await getViewFromCache(currentViewId);
+        const currentView = await getViewFromPrefetchState(currentViewId);

        if (!currentView) {
          return;
@ -120,7 +120,7 @@ export const useUpsertCombinedViewFilters = (viewBarComponentId?: string) => {
      },
    [
      currentViewIdCallbackState,
-      getViewFromCache,
+      getViewFromPrefetchState,
      unsavedToDeleteViewFilterIdsCallbackState,
      unsavedToUpsertViewFiltersCallbackState,
    ],
--- a/packages/twenty-front/src/modules/views/hooks/useUpsertCombinedViewSorts.ts
+++ b/packages/twenty-front/src/modules/views/hooks/useUpsertCombinedViewSorts.ts
@ -1,11 +1,11 @@
 import { useRecoilCallback } from 'recoil';
 import { v4 } from 'uuid';

+import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { Sort } from '@/object-record/object-sort-dropdown/types/Sort';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
-import { useGetViewFromCache } from '@/views/hooks/useGetViewFromCache';
-import { currentViewIdComponentState } from '@/views/states/currentViewIdComponentState';
+import { useGetViewFromPrefetchState } from '@/views/hooks/useGetViewFromPrefetchState';
 import { unsavedToDeleteViewSortIdsComponentFamilyState } from '@/views/states/unsavedToDeleteViewSortIdsComponentFamilyState';
 import { unsavedToUpsertViewSortsComponentFamilyState } from '@/views/states/unsavedToUpsertViewSortsComponentFamilyState';
 import { ViewSort } from '@/views/types/ViewSort';
@ -13,8 +13,7 @@ import { isDefined } from 'twenty-shared';

 export const useUpsertCombinedViewSorts = (viewBarComponentId?: string) => {
  const currentViewIdCallbackState = useRecoilComponentCallbackStateV2(
-    currentViewIdComponentState,
-    viewBarComponentId,
+    contextStoreCurrentViewIdComponentState,
  );

  const unsavedToUpsertViewSortsCallbackState =
@ -29,7 +28,7 @@ export const useUpsertCombinedViewSorts = (viewBarComponentId?: string) => {
      viewBarComponentId,
    );

-  const { getViewFromCache } = useGetViewFromCache();
+  const { getViewFromPrefetchState } = useGetViewFromPrefetchState();

  const upsertCombinedViewSort = useRecoilCallback(
    ({ snapshot, set }) =>
@ -53,7 +52,7 @@ export const useUpsertCombinedViewSorts = (viewBarComponentId?: string) => {
          return;
        }

-        const currentView = await getViewFromCache(currentViewId);
+        const currentView = await getViewFromPrefetchState(currentViewId);

        if (!currentView) {
          return;
@ -111,7 +110,7 @@ export const useUpsertCombinedViewSorts = (viewBarComponentId?: string) => {
      },
    [
      currentViewIdCallbackState,
-      getViewFromCache,
+      getViewFromPrefetchState,
      unsavedToDeleteViewSortIdsCallbackState,
      unsavedToUpsertViewSortsCallbackState,
    ],
--- a/packages/twenty-front/src/modules/views/hooks/useViewOrDefaultViewFromPrefetchedViews.ts
+++ b/packages/twenty-front/src/modules/views/hooks/useViewOrDefaultViewFromPrefetchedViews.ts
@ -1,24 +1,23 @@
-import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
-import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
-import { View } from '@/views/types/View';
-import { useMemo } from 'react';
+import { prefetchIndexViewIdFromObjectMetadataItemFamilySelector } from '@/prefetch/states/selector/prefetchIndexViewIdFromObjectMetadataItemFamilySelector';
+import { prefetchViewFromViewIdFamilySelector } from '@/prefetch/states/selector/prefetchViewFromViewIdFamilySelector';
+import { useRecoilValue } from 'recoil';

 export const useViewOrDefaultViewFromPrefetchedViews = ({
  objectMetadataItemId,
-  viewId,
 }: {
  objectMetadataItemId: string;
-  viewId: string | null | undefined;
 }) => {
-  const { records: views } = usePrefetchedData<View>(PrefetchKey.AllViews);
+  const indexViewId = useRecoilValue(
+    prefetchIndexViewIdFromObjectMetadataItemFamilySelector({
+      objectMetadataItemId,
+    }),
+  );

-  const view = useMemo(() => {
-    return views.find(
-      (view: View) =>
-        (view.key === 'INDEX' || view?.id === viewId) &&
-        view?.objectMetadataId === objectMetadataItemId,
-    );
-  }, [viewId, views, objectMetadataItemId]);
+  const indexView = useRecoilValue(
+    prefetchViewFromViewIdFamilySelector({
+      viewId: indexViewId ?? '',
+    }),
+  );

-  return { view };
+  return { view: indexView };
 };