Used query fields for record table and record board (twentyhq#4857)

- Added two hooks for computing query keys for index table and index board. - Using query keys for findManyRecords on index table and index board
karthikkashyap98 · Apr 5, 2024 · a3184dc · a3184dc
1 parent a95972f
commit a3184dc
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 8 deletions.
diff --git a/packages/twenty-front/src/modules/object-metadata/utils/getObjectMetadataIdentifierFields.ts b/packages/twenty-front/src/modules/object-metadata/utils/getObjectMetadataIdentifierFields.ts
@@ -0,0 +1,20 @@
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { getLabelIdentifierFieldMetadataItem } from '@/object-metadata/utils/getLabelIdentifierFieldMetadataItem';
+
+export const getObjectMetadataIdentifierFields = ({
+  objectMetadataItem,
+}: {
+  objectMetadataItem: ObjectMetadataItem;
+}) => {
+  const labelIdentifierFieldMetadataItem =
+    getLabelIdentifierFieldMetadataItem(objectMetadataItem);
+
+  const imageIdentifierFieldMetadataItem = objectMetadataItem.fields.find(
+    (field) => field.id === objectMetadataItem.imageIdentifierFieldMetadataId,
+  );
+
+  return {
+    labelIdentifierFieldMetadataItem,
+    imageIdentifierFieldMetadataItem,
+  };
+};
diff --git a/...s/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx b/...s/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx
@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import { useRecoilCallback, useRecoilState, useSetRecoilState } from 'recoil';
 
 import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata';
-import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { useObjectMetadataItemOnly } from '@/object-metadata/hooks/useObjectMetadataItemOnly';
 import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
 import { RecordIndexBoardContainer } from '@/object-record/record-index/components/RecordIndexBoardContainer';
 import { RecordIndexBoardContainerEffect } from '@/object-record/record-index/components/RecordIndexBoardContainerEffect';
@@ -53,7 +53,7 @@ export const RecordIndexContainer = ({
     objectNamePlural,
   });
 
-  const { objectMetadataItem } = useObjectMetadataItem({
+  const { objectMetadataItem } = useObjectMetadataItemOnly({
     objectNameSingular,
   });
 

diff --git a/...ont/src/modules/object-record/record-index/components/RecordIndexTableContainerEffect.tsx b/...ont/src/modules/object-record/record-index/components/RecordIndexTableContainerEffect.tsx
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata';
-import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { useObjectMetadataItemOnly } from '@/object-metadata/hooks/useObjectMetadataItemOnly';
 import { useRecordActionBar } from '@/object-record/record-action-bar/hooks/useRecordActionBar';
 import { useHandleToggleColumnFilter } from '@/object-record/record-index/hooks/useHandleToggleColumnFilter';
 import { useHandleToggleColumnSort } from '@/object-record/record-index/hooks/useHandleToggleColumnSort';
@@ -31,7 +31,7 @@ export const RecordIndexTableContainerEffect = ({
     recordTableId,
   });
 
-  const { objectMetadataItem } = useObjectMetadataItem({
+  const { objectMetadataItem } = useObjectMetadataItemOnly({
     objectNameSingular,
   });
 

diff --git a/...ages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoard.ts b/...ages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoard.ts
@@ -1,11 +1,12 @@
 import { useEffect } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 
-import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { useObjectMetadataItemOnly } from '@/object-metadata/hooks/useObjectMetadataItemOnly';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { turnSortsIntoOrderBy } from '@/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy';
 import { useRecordBoard } from '@/object-record/record-board/hooks/useRecordBoard';
 import { turnObjectDropdownFilterIntoQueryFilter } from '@/object-record/record-filter/utils/turnObjectDropdownFilterIntoQueryFilter';
+import { useRecordBoardQueryFields } from '@/object-record/record-index/hooks/useRecordBoardQueryFields';
 import { recordIndexFieldDefinitionsState } from '@/object-record/record-index/states/recordIndexFieldDefinitionsState';
 import { recordIndexFiltersState } from '@/object-record/record-index/states/recordIndexFiltersState';
 import { recordIndexIsCompactModeActiveState } from '@/object-record/record-index/states/recordIndexIsCompactModeActiveState';
@@ -24,7 +25,7 @@ export const useLoadRecordIndexBoard = ({
   viewBarId,
   recordBoardId,
 }: UseLoadRecordIndexBoardProps) => {
-  const { objectMetadataItem } = useObjectMetadataItem({
+  const { objectMetadataItem } = useObjectMetadataItemOnly({
     objectNameSingular,
   });
   const {
@@ -55,6 +56,11 @@ export const useLoadRecordIndexBoard = ({
     recordIndexIsCompactModeActiveState,
   );
 
+  const queryFields = useRecordBoardQueryFields({
+    objectMetadataItem,
+    recordBoardId,
+  });
+
   const {
     records,
     totalCount,
@@ -65,6 +71,7 @@ export const useLoadRecordIndexBoard = ({
     objectNameSingular,
     filter: requestFilters,
     orderBy,
+    queryFields,
   });
 
   const { setRecordCountInCurrentView } =

diff --git a/...ages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts b/...ages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts
@@ -1,10 +1,11 @@
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState.ts';
-import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { useObjectMetadataItemOnly } from '@/object-metadata/hooks/useObjectMetadataItemOnly';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { turnSortsIntoOrderBy } from '@/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy';
 import { turnObjectDropdownFilterIntoQueryFilter } from '@/object-record/record-filter/utils/turnObjectDropdownFilterIntoQueryFilter';
+import { useRecordTableQueryFields } from '@/object-record/record-index/hooks/useRecordTableQueryFields';
 import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
 import { SIGN_IN_BACKGROUND_MOCK_COMPANIES } from '@/sign-in-background-mock/constants/SignInBackgroundMockCompanies';
@@ -13,7 +14,7 @@ export const useFindManyParams = (
   objectNameSingular: string,
   recordTableId?: string,
 ) => {
-  const { objectMetadataItem } = useObjectMetadataItem({
+  const { objectMetadataItem } = useObjectMetadataItemOnly({
     objectNameSingular,
   });
 
@@ -48,6 +49,8 @@ export const useLoadRecordIndexTable = (objectNameSingular: string) => {
   const currentWorkspace = useRecoilValue(currentWorkspaceState);
   const params = useFindManyParams(objectNameSingular);
 
+  const queryFields = useRecordTableQueryFields();
+
   const {
     records,
     loading,
@@ -56,6 +59,7 @@ export const useLoadRecordIndexTable = (objectNameSingular: string) => {
     queryStateIdentifier,
   } = useFindManyRecords({
     ...params,
+    queryFields,
     onCompleted: () => {
       setLastRowVisible(false);
       setIsRecordTableInitialLoading(false);

diff --git a/...es/twenty-front/src/modules/object-record/record-index/hooks/useRecordBoardQueryFields.ts b/...es/twenty-front/src/modules/object-record/record-index/hooks/useRecordBoardQueryFields.ts
@@ -0,0 +1,52 @@
+import { useRecoilValue } from 'recoil';
+
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { getObjectMetadataIdentifierFields } from '@/object-metadata/utils/getObjectMetadataIdentifierFields';
+import { useRecordBoardStates } from '@/object-record/record-board/hooks/internal/useRecordBoardStates';
+import { isDefined } from '~/utils/isDefined';
+
+export const useRecordBoardQueryFields = ({
+  objectMetadataItem,
+  recordBoardId,
+}: {
+  recordBoardId: string;
+  objectMetadataItem: ObjectMetadataItem;
+}) => {
+  const { kanbanFieldMetadataNameState, visibleFieldDefinitionsState } =
+    useRecordBoardStates(recordBoardId);
+
+  const { imageIdentifierFieldMetadataItem, labelIdentifierFieldMetadataItem } =
+    getObjectMetadataIdentifierFields({ objectMetadataItem });
+
+  const kanbanFieldMetadataName = useRecoilValue(kanbanFieldMetadataNameState);
+  const visibleFieldDefinitions = useRecoilValue(
+    visibleFieldDefinitionsState(),
+  );
+
+  const identifierQueryFields: Record<string, boolean> = {};
+
+  if (isDefined(labelIdentifierFieldMetadataItem)) {
+    identifierQueryFields[labelIdentifierFieldMetadataItem.name] = true;
+  }
+
+  if (isDefined(imageIdentifierFieldMetadataItem)) {
+    identifierQueryFields[imageIdentifierFieldMetadataItem.name] = true;
+  }
+
+  const queryFields: Record<string, any> = {
+    id: true,
+    ...Object.fromEntries(
+      visibleFieldDefinitions.map((visibleFieldDefinition) => [
+        visibleFieldDefinition.metadata.fieldName,
+        true,
+      ]),
+    ),
+    ...identifierQueryFields,
+  };
+
+  if (isDefined(kanbanFieldMetadataName)) {
+    queryFields[kanbanFieldMetadataName] = true;
+  }
+
+  return queryFields;
+};
diff --git a/...es/twenty-front/src/modules/object-record/record-index/hooks/useRecordTableQueryFields.ts b/...es/twenty-front/src/modules/object-record/record-index/hooks/useRecordTableQueryFields.ts
@@ -0,0 +1,18 @@
+import { useRecoilValue } from 'recoil';
+
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+
+export const useRecordTableQueryFields = () => {
+  const { visibleTableColumnsSelector } = useRecordTableStates();
+
+  const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
+
+  const queryFields: Record<string, any> = {
+    id: true,
+    ...Object.fromEntries(
+      visibleTableColumns.map((column) => [column.metadata.fieldName, true]),
+    ),
+  };
+
+  return queryFields;
+};