Refetch aggregate queries on record creation/update/deletion of record

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

@@ -11,6 +11,7 @@ import { getObjectTypename } from '@/object-record/cache/utils/getObjectTypename
 import { RecordGqlOperationGqlRecordFields } from '@/object-record/graphql/types/RecordGqlOperationGqlRecordFields';
 import { generateDepthOneRecordGqlFields } from '@/object-record/graphql/utils/generateDepthOneRecordGqlFields';
 import { useCreateManyRecordsMutation } from '@/object-record/hooks/useCreateManyRecordsMutation';
+import { useRefetchAggregateQueries } from '@/object-record/hooks/useRefetchAggregateQueries';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { getCreateManyRecordsMutationResponseField } from '@/object-record/utils/getCreateManyRecordsMutationResponseField';
 import { sanitizeRecordInput } from '@/object-record/utils/sanitizeRecordInput';
@@ -51,6 +52,10 @@ export const useCreateManyRecords = <
 
   const { objectMetadataItems } = useObjectMetadataItems();
 
+  const { refetchAggregateQueries } = useRefetchAggregateQueries({
+    objectMetadataNamePlural: objectMetadataItem.namePlural,
+  });
+
   const createManyRecords = async (
     recordsToCreate: Partial<CreatedObjectRecord>[],
     upsert?: boolean,
@@ -141,6 +146,7 @@ export const useCreateManyRecords = <
         throw error;
       });
 
+    await refetchAggregateQueries();
     return createdObjects.data?.[mutationResponseField] ?? [];
   };
 

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

@@ -12,6 +12,7 @@ import { getObjectTypename } from '@/object-record/cache/utils/getObjectTypename
 import { RecordGqlOperationGqlRecordFields } from '@/object-record/graphql/types/RecordGqlOperationGqlRecordFields';
 import { generateDepthOneRecordGqlFields } from '@/object-record/graphql/utils/generateDepthOneRecordGqlFields';
 import { useCreateOneRecordMutation } from '@/object-record/hooks/useCreateOneRecordMutation';
+import { useRefetchAggregateQueries } from '@/object-record/hooks/useRefetchAggregateQueries';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { getCreateOneRecordMutationResponseField } from '@/object-record/utils/getCreateOneRecordMutationResponseField';
 import { sanitizeRecordInput } from '@/object-record/utils/sanitizeRecordInput';
@@ -55,6 +56,10 @@ export const useCreateOneRecord = <
 
   const { objectMetadataItems } = useObjectMetadataItems();
 
+  const { refetchAggregateQueries } = useRefetchAggregateQueries({
+    objectMetadataNamePlural: objectMetadataItem.namePlural,
+  });
+
   const createOneRecord = async (input: Partial<CreatedObjectRecord>) => {
     setLoading(true);
 
@@ -131,6 +136,7 @@ export const useCreateOneRecord = <
         throw error;
       });
 
+    await refetchAggregateQueries();
     return createdObject.data?.[mutationResponseField] ?? null;
   };
 

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

@@ -9,6 +9,7 @@ import { getRecordNodeFromRecord } from '@/object-record/cache/utils/getRecordNo
 import { updateRecordFromCache } from '@/object-record/cache/utils/updateRecordFromCache';
 import { DEFAULT_MUTATION_BATCH_SIZE } from '@/object-record/constants/DefaultMutationBatchSize';
 import { useDeleteManyRecordsMutation } from '@/object-record/hooks/useDeleteManyRecordsMutation';
+import { useRefetchAggregateQueries } from '@/object-record/hooks/useRefetchAggregateQueries';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { getDeleteManyRecordsMutationResponseField } from '@/object-record/utils/getDeleteManyRecordsMutationResponseField';
 import { useRecoilValue } from 'recoil';
@@ -51,6 +52,10 @@ export const useDeleteManyRecords = ({
 
   const { objectMetadataItems } = useObjectMetadataItems();
 
+  const { refetchAggregateQueries } = useRefetchAggregateQueries({
+    objectMetadataNamePlural: objectMetadataItem.namePlural,
+  });
+
   const mutationResponseField = getDeleteManyRecordsMutationResponseField(
     objectMetadataItem.namePlural,
   );
@@ -194,7 +199,7 @@ export const useDeleteManyRecords = ({
         await sleep(options.delayInMsBetweenRequests);
       }
     }
-
+    await refetchAggregateQueries();
     return deletedRecords;
   };
 

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

@@ -8,6 +8,7 @@ import { useGetRecordFromCache } from '@/object-record/cache/hooks/useGetRecordF
 import { getRecordNodeFromRecord } from '@/object-record/cache/utils/getRecordNodeFromRecord';
 import { updateRecordFromCache } from '@/object-record/cache/utils/updateRecordFromCache';
 import { useDeleteOneRecordMutation } from '@/object-record/hooks/useDeleteOneRecordMutation';
+import { useRefetchAggregateQueries } from '@/object-record/hooks/useRefetchAggregateQueries';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { getDeleteOneRecordMutationResponseField } from '@/object-record/utils/getDeleteOneRecordMutationResponseField';
 import { capitalize } from '~/utils/string/capitalize';
@@ -35,6 +36,10 @@ export const useDeleteOneRecord = ({
 
   const { objectMetadataItems } = useObjectMetadataItems();
 
+  const { refetchAggregateQueries } = useRefetchAggregateQueries({
+    objectMetadataNamePlural: objectMetadataItem.namePlural,
+  });
+
   const mutationResponseField =
     getDeleteOneRecordMutationResponseField(objectNameSingular);
 
@@ -126,6 +131,7 @@ export const useDeleteOneRecord = ({
           throw error;
         });
 
+      await refetchAggregateQueries();
       return deletedRecord.data?.[mutationResponseField] ?? null;
     },
     [
@@ -135,6 +141,7 @@ export const useDeleteOneRecord = ({
       mutationResponseField,
       objectMetadataItem,
       objectMetadataItems,
+      refetchAggregateQueries,
     ],
   );
 

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

@@ -8,6 +8,7 @@ import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadat
 import { useGetRecordFromCache } from '@/object-record/cache/hooks/useGetRecordFromCache';
 import { DEFAULT_MUTATION_BATCH_SIZE } from '@/object-record/constants/DefaultMutationBatchSize';
 import { useDestroyManyRecordsMutation } from '@/object-record/hooks/useDestroyManyRecordsMutation';
+import { useRefetchAggregateQueries } from '@/object-record/hooks/useRefetchAggregateQueries';
 import { getDestroyManyRecordsMutationResponseField } from '@/object-record/utils/getDestroyManyRecordsMutationResponseField';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from '~/utils/isDefined';
@@ -48,6 +49,10 @@ export const useDestroyManyRecords = ({
 
   const { objectMetadataItems } = useObjectMetadataItems();
 
+  const { refetchAggregateQueries } = useRefetchAggregateQueries({
+    objectMetadataNamePlural: objectMetadataItem.namePlural,
+  });
+
   const mutationResponseField = getDestroyManyRecordsMutationResponseField(
     objectMetadataItem.namePlural,
   );
@@ -127,6 +132,7 @@ export const useDestroyManyRecords = ({
       }
     }
 
+    await refetchAggregateQueries();
     return destroyedRecords;
   };
 

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

@@ -0,0 +1,27 @@
+import { getAggregateQueryName } from '@/object-record/utils/getAggregateQueryName';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { useApolloClient } from '@apollo/client';
+
+export const useRefetchAggregateQueries = ({
+  objectMetadataNamePlural,
+}: {
+  objectMetadataNamePlural: string;
+}) => {
+  const apolloClient = useApolloClient();
+  const isAggregateQueryEnabled = useIsFeatureEnabled(
+    'IS_AGGREGATE_QUERY_ENABLED',
+  );
+  const refetchAggregateQueries = async () => {
+    const queryName = getAggregateQueryName(objectMetadataNamePlural);
+
+    if (isAggregateQueryEnabled) {
+      await apolloClient.refetchQueries({
+        include: [queryName],
+      });
+    }
+  };
+
+  return {
+    refetchAggregateQueries,
+  };
+};

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

@@ -7,6 +7,7 @@ import { useGetRecordFromCache } from '@/object-record/cache/hooks/useGetRecordF
 import { getRecordNodeFromRecord } from '@/object-record/cache/utils/getRecordNodeFromRecord';
 import { updateRecordFromCache } from '@/object-record/cache/utils/updateRecordFromCache';
 import { generateDepthOneRecordGqlFields } from '@/object-record/graphql/utils/generateDepthOneRecordGqlFields';
+import { useRefetchAggregateQueries } from '@/object-record/hooks/useRefetchAggregateQueries';
 import { useUpdateOneRecordMutation } from '@/object-record/hooks/useUpdateOneRecordMutation';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { getUpdateOneRecordMutationResponseField } from '@/object-record/utils/getUpdateOneRecordMutationResponseField';
@@ -45,6 +46,10 @@ export const useUpdateOneRecord = <
 
   const { objectMetadataItems } = useObjectMetadataItems();
 
+  const { refetchAggregateQueries } = useRefetchAggregateQueries({
+    objectMetadataNamePlural: objectMetadataItem.namePlural,
+  });
+
   const updateOneRecord = async ({
     idToUpdate,
     updateOneRecordInput,
@@ -116,7 +121,7 @@ export const useUpdateOneRecord = <
           idToUpdate,
           input: sanitizedInput,
         },
-        update: (cache, { data }) => {
+        update: async (cache, { data }) => {
           const record = data?.[mutationResponseField];
 
           if (!record || !cachedRecord) return;
@@ -128,6 +133,8 @@ export const useUpdateOneRecord = <
             updatedRecord: record,
             objectMetadataItems,
           });
+
+          await refetchAggregateQueries();
         },
       })
       .catch((error: Error) => {
@@ -152,6 +159,7 @@ export const useUpdateOneRecord = <
         throw error;
       });
 
+    await refetchAggregateQueries();
     return updatedRecord?.data?.[mutationResponseField] ?? null;
   };
 

packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdown.tsx

@@ -11,7 +11,7 @@ import { RecordBoardColumnHotkeyScope } from '@/object-record/record-board/types
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 
 type RecordBoardColumnHeaderAggregateDropdownProps = {
-  aggregateValue: string | number;
+  aggregateValue?: string | number;
   aggregateLabel?: string;
   objectMetadataItem: ObjectMetadataItem;
   dropdownId: string;

packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownButton.tsx

@@ -13,13 +13,16 @@ export const RecordBoardColumnHeaderAggregateDropdownButton = ({
   tooltip,
 }: {
   dropdownId: string;
-  value: string | number;
+  value?: string | number;
   tooltip?: string;
 }) => {
   return (
     <div id={dropdownId}>
       <StyledButton>
-        <Tag text={formatNumber(Number(value))} color={'transparent'} />
+        <Tag
+          text={value ? formatNumber(Number(value)) : '-'}
+          color={'transparent'}
+        />
         <AppTooltip
           anchorSelect={`#${dropdownId}`}
           content={tooltip}

packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownFieldsContent.tsx

@@ -41,7 +41,7 @@ export const RecordBoardColumnHeaderAggregateDropdownFieldsContent = () => {
 
         if (!fieldMetadata) return null;
         return (
-          <DropdownMenuItemsContainer>
+          <DropdownMenuItemsContainer key={fieldId}>
             <MenuItem
               key={fieldId}
               onClick={() => {

packages/twenty-front/src/modules/object-record/record-board/record-board-column/hooks/useAggregateManyRecordsForRecordBoardColumn.ts

@@ -82,7 +82,7 @@ export const useAggregateManyRecordsForRecordBoardColumn = () => {
   );
 
   return {
-    aggregateValue: value ?? recordCount,
+    aggregateValue: isAggregateQueryEnabled ? value : recordCount,
     aggregateLabel: isDefined(value) ? label : undefined,
   };
 };

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

@@ -2,6 +2,7 @@ import gql from 'graphql-tag';
 
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { RecordGqlFields } from '@/object-record/graphql/types/RecordGqlFields';
+import { getAggregateQueryName } from '@/object-record/utils/getAggregateQueryName';
 import { capitalize } from '~/utils/string/capitalize';
 
 export const generateAggregateQuery = ({
@@ -17,7 +18,7 @@ export const generateAggregateQuery = ({
     .join('\n      ');
 
   return gql`
-    query AggregateMany${capitalize(objectMetadataItem.namePlural)}($filter: ${capitalize(
+    query ${getAggregateQueryName(objectMetadataItem.namePlural)}($filter: ${capitalize(
       objectMetadataItem.nameSingular,
     )}FilterInput) {
       ${objectMetadataItem.namePlural}(filter: $filter) {

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

@@ -0,0 +1,10 @@
+import { capitalize } from '~/utils/string/capitalize';
+
+export const getAggregateQueryName = (
+  objectMetadataNamePlural: string,
+): string => {
+  if (!objectMetadataNamePlural) {
+    throw new Error('objectMetadataNamePlural is required');
+  }
+  return `AggregateMany${capitalize(objectMetadataNamePlural)}`;
+};