3757 update frontend to show correct view count (#3967)

* Add totalCount to fetch record request

* Add totalCount to object board

* WIP Add totalCount to object table

* Update query total count on update / delete optimistic effects

* Remove console log

* Load fewer data for totalcount

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

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

@@ -63,6 +63,13 @@ export const triggerCreateRecordsOptimisticEffect = ({
           'edges',
           rootQueryCachedObjectRecordConnection,
         );
+
+        const rootQueryCachedRecordTotalCount =
+          readField<number>(
+            'totalCount',
+            rootQueryCachedObjectRecordConnection,
+          ) || 0;
+
         const nextRootQueryCachedRecordEdges = rootQueryCachedRecordEdges
           ? [...rootQueryCachedRecordEdges]
           : [];
@@ -109,6 +116,7 @@ export const triggerCreateRecordsOptimisticEffect = ({
         return {
           ...rootQueryCachedObjectRecordConnection,
           edges: nextRootQueryCachedRecordEdges,
+          totalCount: rootQueryCachedRecordTotalCount + 1,
         };
       },
     },

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

@@ -50,6 +50,12 @@ export const triggerDeleteRecordsOptimisticEffect = ({
           rootQueryCachedObjectRecordConnection,
         );
 
+        const totalCount =
+          readField<number>(
+            'totalCount',
+            rootQueryCachedObjectRecordConnection,
+          ) || 0;
+
         const nextCachedEdges =
           cachedEdges?.filter((cachedEdge) => {
             const nodeId = readField<string>('id', cachedEdge.node);
@@ -71,6 +77,7 @@ export const triggerDeleteRecordsOptimisticEffect = ({
         return {
           ...rootQueryCachedObjectRecordConnection,
           edges: nextCachedEdges,
+          totalCount: totalCount - recordIdsToDelete.length,
         };
       },
     },

packages/twenty-front/src/modules/object-record/hooks/__mocks__/useMapConnectionToRecords.ts

@@ -11,6 +11,7 @@ export const emptyConnectionMock: ObjectRecordConnection = {
     startCursor: '',
     endCursor: '',
   },
+  totalCount: 0,
   __typename: 'ObjectRecordConnection',
 };
 
@@ -46,6 +47,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock:
             hasPreviousPage: false,
             startCursor: null,
           },
+          totalCount: 0,
         },
       },
     },
@@ -86,6 +88,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock:
                     startCursor:
                       'WyJjODVhODY3Yy01YThmLTQ4NjEtOGVkMi05NmMzOTAyNDg0MjMiXQ==',
                   },
+                  totalCount: 1,
                 },
               },
             },
@@ -106,6 +109,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock:
                     hasPreviousPage: false,
                     startCursor: null,
                   },
+                  totalCount: 0,
                 },
               },
             },
@@ -126,6 +130,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock:
                     hasPreviousPage: false,
                     startCursor: null,
                   },
+                  totalCount: 0,
                 },
               },
             },
@@ -146,6 +151,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock:
                     hasPreviousPage: false,
                     startCursor: null,
                   },
+                  totalCount: 0,
                 },
               },
             },
@@ -166,6 +172,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock:
                     hasPreviousPage: false,
                     startCursor: null,
                   },
+                  totalCount: 0,
                 },
               },
             },
@@ -186,6 +193,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock:
                     hasPreviousPage: false,
                     startCursor: null,
                   },
+                  totalCount: 0,
                 },
               },
             },
@@ -198,6 +206,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock:
             startCursor:
               'WyIyNDBkYTJlYy0yZDQwLTRlNDktOGRmNC05YzZhMDQ5MTkwZGYiXQ==',
           },
+          totalCount: 6,
         },
       },
     },
@@ -225,6 +234,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock:
                     hasPreviousPage: false,
                     startCursor: null,
                   },
+                  totalCount: 0,
                 },
               },
             },
@@ -245,6 +255,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock:
                     hasPreviousPage: false,
                     startCursor: null,
                   },
+                  totalCount: 0,
                 },
               },
             },
@@ -257,6 +268,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock:
             startCursor:
               'WyI5M2M3MmQyZS1mNTE3LTQyZmQtODBhZS0xNDE3M2IzYjcwYWUiXQ==',
           },
+          totalCount: 2,
         },
       },
     },
@@ -273,6 +285,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock:
             hasPreviousPage: false,
             startCursor: null,
           },
+          totalCount: 0,
         },
       },
     },
@@ -300,6 +313,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock:
                     hasPreviousPage: false,
                     startCursor: null,
                   },
+                  totalCount: 0,
                 },
               },
             },
@@ -320,6 +334,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock:
                     hasPreviousPage: false,
                     startCursor: null,
                   },
+                  totalCount: 0,
                 },
               },
             },
@@ -340,6 +355,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock:
                     hasPreviousPage: false,
                     startCursor: null,
                   },
+                  totalCount: 0,
                 },
               },
             },
@@ -352,6 +368,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock:
             startCursor:
               'WyIxZDE1MTg1Mi00OTBmLTQ0NjYtODM5MS03MzNjZmQ2NmEwYzgiXQ==',
           },
+          totalCount: 3,
         },
       },
     },
@@ -368,6 +385,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock:
             hasPreviousPage: false,
             startCursor: null,
           },
+          totalCount: 0,
         },
       },
     },
@@ -384,6 +402,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock:
             hasPreviousPage: false,
             startCursor: null,
           },
+          totalCount: 0,
         },
       },
     },
@@ -400,6 +419,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock:
             hasPreviousPage: false,
             startCursor: null,
           },
+          totalCount: 0,
         },
       },
     },
@@ -427,6 +447,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock:
                     hasPreviousPage: false,
                     startCursor: null,
                   },
+                  totalCount: 0,
                 },
               },
             },
@@ -439,6 +460,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock:
             startCursor:
               'WyIyNDBkYTJlYy0yZDQwLTRlNDktOGRmNC05YzZhMDQ5MTkxZGYiXQ==',
           },
+          totalCount: 1,
         },
       },
     },
@@ -466,6 +488,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock:
                     hasPreviousPage: false,
                     startCursor: null,
                   },
+                  totalCount: 0,
                 },
               },
             },
@@ -478,6 +501,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock:
             startCursor:
               'WyIyNDBkYTJlYy0yZDQwLTRlNDktOGRmNC05YzZhMDQ5MTkxZGUiXQ==',
           },
+          totalCount: 1,
         },
       },
     },
@@ -494,6 +518,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock:
             hasPreviousPage: false,
             startCursor: null,
           },
+          totalCount: 0,
         },
       },
     },
@@ -510,6 +535,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock:
             hasPreviousPage: false,
             startCursor: null,
           },
+          totalCount: 0,
         },
       },
     },
@@ -550,6 +576,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock:
                     startCursor:
                       'WyIzN2I5NzE0MC0yNmI5LTQ5OGMtODM3Yi00ZjNkZTQ5OWFkODMiXQ==',
                   },
+                  totalCount: 1,
                 },
               },
             },
@@ -570,6 +597,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock:
                     hasPreviousPage: false,
                     startCursor: null,
                   },
+                  totalCount: 0,
                 },
               },
             },
@@ -582,10 +610,12 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock:
             startCursor:
               'WyIwYWEwMGJlYi1hYzczLTQ3OTctODI0ZS04N2ExZjVhZWE5ZTAiXQ==',
           },
+          totalCount: 2,
         },
       },
     },
   ],
+  totalCount: 13,
 };
 
 export const peopleWithTheirUniqueCompanies: ObjectRecordConnection<
@@ -597,6 +627,7 @@ export const peopleWithTheirUniqueCompanies: ObjectRecordConnection<
     hasPreviousPage: false,
     startCursor: 'WyIwYWEwMGJlYi1hYzczLTQ3OTctODI0ZS04N2ExZjVhZWE5ZTAiXQ==',
   },
+  totalCount: 15,
   edges: [
     {
       cursor: 'WyIwYWEwMGJlYi1hYzczLTQ3OTctODI0ZS04N2ExZjVhZWE5ZTAiXQ==',

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

@@ -146,6 +146,8 @@ export const useFindManyRecords = <T extends ObjectRecord = ObjectRecord>({
               edges: newEdges,
               pageInfo:
                 fetchMoreResult?.[objectMetadataItem.namePlural].pageInfo,
+              totalCount:
+                fetchMoreResult?.[objectMetadataItem.namePlural].totalCount,
             });
 
             return Object.assign({}, prev, {
@@ -156,6 +158,8 @@ export const useFindManyRecords = <T extends ObjectRecord = ObjectRecord>({
                 edges: newEdges,
                 pageInfo:
                   fetchMoreResult?.[objectMetadataItem.namePlural].pageInfo,
+                totalCount:
+                  fetchMoreResult?.[objectMetadataItem.namePlural].totalCount,
               },
             } as ObjectRecordQueryResult<T>);
           },
@@ -224,6 +228,7 @@ export const useFindManyRecords = <T extends ObjectRecord = ObjectRecord>({
   return {
     objectMetadataItem,
     records: useRecordsWithoutConnection ? recordsWithoutConnection : records,
+    totalCount: data?.[objectMetadataItem.namePlural].totalCount || 0,
     loading,
     error,
     fetchMoreRecords,

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

@@ -43,6 +43,7 @@ export const useGenerateFindManyRecordsQuery = () => {
           startCursor
           endCursor
         }
+        totalCount
       }
     }
   `;

packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoard.ts

@@ -56,12 +56,17 @@ export const useLoadRecordIndexBoard = ({
     recordIndexIsCompactModeActiveState,
   );
 
-  const { records, loading, fetchMoreRecords, queryStateIdentifier } =
+  const {
-    useFindManyRecords({
+    records,
-      objectNameSingular,
+    totalCount,
-      filter: requestFilters,
+    loading,
-      orderBy,
+    fetchMoreRecords,
-    });
+    queryStateIdentifier,
+  } = useFindManyRecords({
+    objectNameSingular,
+    filter: requestFilters,
+    orderBy,
+  });
 
   const { setEntityCountInCurrentView } = useViewBar({
     viewBarId,
@@ -80,8 +85,8 @@ export const useLoadRecordIndexBoard = ({
   }, [records, setRecordsInStore]);
 
   useEffect(() => {
-    setEntityCountInCurrentView(records.length);
+    setEntityCountInCurrentView(totalCount);
-  }, [records.length, setEntityCountInCurrentView]);
+  }, [totalCount, setEntityCountInCurrentView]);
 
   useEffect(() => {
     setIsCompactModeActive(recordIndexIsCompactModeActive);

packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts

@@ -41,19 +41,25 @@ export const useLoadRecordIndexTable = (objectNameSingular: string) => {
     objectMetadataItem?.fields ?? [],
   );
 
-  const { records, loading, fetchMoreRecords, queryStateIdentifier } =
+  const {
-    useFindManyRecords({
+    records,
-      objectNameSingular,
+    loading,
-      filter: requestFilters,
+    totalCount,
-      orderBy,
+    fetchMoreRecords,
-      onCompleted: () => {
+    queryStateIdentifier,
-        setLastRowVisible(false);
+  } = useFindManyRecords({
-        setIsRecordTableInitialLoading(false);
+    objectNameSingular,
-      },
+    filter: requestFilters,
-    });
+    orderBy,
+    onCompleted: () => {
+      setLastRowVisible(false);
+      setIsRecordTableInitialLoading(false);
+    },
+  });
 
   return {
     records: isCurrentWorkspaceActive ? records : signInBackgroundMockCompanies,
+    totalCount: totalCount || 0,
     loading,
     fetchMoreRecords,
     queryStateIdentifier,

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyEffect.tsx

@@ -15,6 +15,7 @@ export const RecordTableBodyEffect = ({
   const {
     fetchMoreRecords: fetchMoreObjects,
     records,
+    totalCount,
     setRecordTableData,
     queryStateIdentifier,
     loading,
@@ -32,9 +33,9 @@ export const RecordTableBodyEffect = ({
 
   useEffect(() => {
     if (!loading) {
-      setRecordTableData(records);
+      setRecordTableData(records, totalCount);
     }
-  }, [records, setRecordTableData, loading]);
+  }, [records, totalCount, setRecordTableData, loading]);
 
   useEffect(() => {
     if (tableLastRowVisible && !isFetchingMoreObjects) {

packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts

@@ -19,7 +19,7 @@ export const useSetRecordTableData = ({
 
   return useRecoilCallback(
     ({ set, snapshot }) =>
-      <T extends { id: string }>(newEntityArray: T[]) => {
+      <T extends { id: string }>(newEntityArray: T[], totalCount: number) => {
         for (const entity of newEntityArray) {
           // TODO: refactor with scoped state later
           const currentEntity = snapshot
@@ -38,8 +38,8 @@ export const useSetRecordTableData = ({
           set(getTableRowIdsState(), entityIds);
         }
 
-        set(getNumberOfTableRowsState(), entityIds.length);
+        set(getNumberOfTableRowsState(), totalCount);
-        onEntityCountChange(entityIds.length);
+        onEntityCountChange(totalCount);
       },
     [getNumberOfTableRowsState, getTableRowIdsState, onEntityCountChange],
   );

packages/twenty-front/src/modules/object-record/types/ObjectRecordConnection.ts

@@ -11,4 +11,5 @@ export type ObjectRecordConnection<T extends ObjectRecord = ObjectRecord> = {
     startCursor?: Nullable<string>;
     endCursor?: Nullable<string>;
   };
+  totalCount: number;
 };

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx

@@ -36,10 +36,10 @@ export const SettingsObjectItemTableRow = ({
 }: SettingsObjectItemTableRowProps) => {
   const theme = useTheme();
 
-  const { records } = useFindManyRecords({
+  const { totalCount } = useFindManyRecords({
     objectNameSingular: objectItem.nameSingular,
+    depth: 0,
   });
-
   const { getIcon } = useIcons();
   const Icon = getIcon(objectItem.icon);
 
@@ -61,7 +61,7 @@ export const SettingsObjectItemTableRow = ({
       <TableCell align="right">
         {objectItem.fields.filter((field) => !field.isSystem).length}
       </TableCell>
-      <TableCell align="right">{records.length}</TableCell>
+      <TableCell align="right">{totalCount}</TableCell>
       <StyledActionTableCell>{action}</StyledActionTableCell>
     </StyledObjectTableRow>
   );