Fix filtered INDEX view not loading

packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx

@@ -24,12 +24,15 @@ import { useRelationPicker } from '@/object-record/relation-picker/hooks/useRela
 import { RelationPickerScope } from '@/object-record/relation-picker/scopes/RelationPickerScope';
 import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
+import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { FilterQueryParams } from '@/views/hooks/internal/useViewFromQueryParams';
+import { View } from '@/views/types/View';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
 import { RelationDefinitionType } from '~/generated-metadata/graphql';
 
@@ -119,12 +122,21 @@ export const RecordDetailRelationSection = ({
     scopeId: dropdownId,
   });
 
+  const { records: views } = usePrefetchedData<View>(PrefetchKey.AllViews);
+
+  const indexView = views.find(
+    (view) =>
+      view.key === 'INDEX' &&
+      view.objectMetadataId === relationObjectMetadataItem.id,
+  );
+
   const filterQueryParams: FilterQueryParams = {
     filter: {
       [relationFieldMetadataItem?.name || '']: {
         [ViewFilterOperand.Is]: [recordId],
       },
     },
+    view: indexView?.id,
   };
   const filterLinkHref = `/objects/${
     relationObjectMetadataItem.namePlural

packages/twenty-front/src/modules/views/components/QueryParamsFiltersEffect.tsx

@@ -1,23 +1,24 @@
 import { useEffect } from 'react';
 
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentFamilyStateV2';
 import { useViewFromQueryParams } from '@/views/hooks/internal/useViewFromQueryParams';
-import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { useResetUnsavedViewStates } from '@/views/hooks/useResetUnsavedViewStates';
+import { currentViewIdComponentState } from '@/views/states/currentViewIdComponentState';
 import { unsavedToUpsertViewFiltersComponentFamilyState } from '@/views/states/unsavedToUpsertViewFiltersComponentFamilyState';
-import { isDefined } from 'twenty-ui';
 
 export const QueryParamsFiltersEffect = () => {
   const { hasFiltersQueryParams, getFiltersFromQueryParams, viewIdQueryParam } =
     useViewFromQueryParams();
 
+  const currentViewId = useRecoilComponentValueV2(currentViewIdComponentState);
+
   const setUnsavedViewFilter = useSetRecoilComponentFamilyStateV2(
     unsavedToUpsertViewFiltersComponentFamilyState,
-    { viewId: viewIdQueryParam },
+    { viewId: viewIdQueryParam ?? currentViewId },
   );
 
   const { resetUnsavedViewStates } = useResetUnsavedViewStates();
-  const { currentViewId } = useGetCurrentView();
 
   useEffect(() => {
     if (!hasFiltersQueryParams) {
@@ -29,18 +30,11 @@ export const QueryParamsFiltersEffect = () => {
         setUnsavedViewFilter(filtersFromParams);
       }
     });
-
-    return () => {
-      if (isDefined(currentViewId)) {
-        resetUnsavedViewStates(currentViewId);
-      }
-    };
   }, [
     getFiltersFromQueryParams,
     hasFiltersQueryParams,
     resetUnsavedViewStates,
     setUnsavedViewFilter,
-    currentViewId,
   ]);
 
   return <></>;