Fix view picker total count on board (#10697)

This PR is a follow-up of https://github.com/twentyhq/twenty/pull/10612
where the method of computation of total count was only taking records
fetched on the front end.

In this PR we use `totalCount` returned by `useFindManyRecords` instead,
which returns the total count in DB for the given filters.

We also set `shouldMatchRootQueryFilter` on board card create mutation
to avoid optimistic rendering issues.

Fixes https://github.com/twentyhq/twenty/issues/10598
This commit is contained in:
Lucas Bordeau
2025-03-07 15:47:34 +01:00
committed by GitHub
parent 96035f0ccf
commit 3d7f4b7971
3 changed files with 14 additions and 15 deletions

View File

@ -2,7 +2,6 @@ import { useRecoilCallback } from 'recoil';
import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState'; import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState';
import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState'; import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState';
import { useSetRecordIndexEntityCount } from '@/object-record/record-index/hooks/useSetRecordIndexEntityCount';
import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState'; import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState';
import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2'; import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
@ -22,9 +21,6 @@ export const useSetRecordIdsForColumn = (recordBoardId?: string) => {
recordBoardId, recordBoardId,
); );
const { setRecordIndexEntityCount } =
useSetRecordIndexEntityCount(recordBoardId);
const setRecordIdsForColumn = useRecoilCallback( const setRecordIdsForColumn = useRecoilCallback(
({ set, snapshot }) => ({ set, snapshot }) =>
(currentRecordGroupId: string, records: ObjectRecord[]) => { (currentRecordGroupId: string, records: ObjectRecord[]) => {
@ -59,18 +55,9 @@ export const useSetRecordIdsForColumn = (recordBoardId?: string) => {
recordIndexRecordIdsByGroupFamilyState(currentRecordGroupId), recordIndexRecordIdsByGroupFamilyState(currentRecordGroupId),
recordGroupRowIds, recordGroupRowIds,
); );
setRecordIndexEntityCount(
recordGroupRowIds.length,
currentRecordGroupId,
);
} }
}, },
[ [recordIndexRecordIdsByGroupFamilyState, recordGroupFieldMetadataState],
recordIndexRecordIdsByGroupFamilyState,
recordGroupFieldMetadataState,
setRecordIndexEntityCount,
],
); );
return { return {

View File

@ -33,7 +33,10 @@ export const RecordIndexBoardContainer = ({
const { deleteOneRecord } = useDeleteOneRecord({ objectNameSingular }); const { deleteOneRecord } = useDeleteOneRecord({ objectNameSingular });
const { updateOneRecord } = useUpdateOneRecord({ objectNameSingular }); const { updateOneRecord } = useUpdateOneRecord({ objectNameSingular });
const { createOneRecord } = useCreateOneRecord({ objectNameSingular }); const { createOneRecord } = useCreateOneRecord({
objectNameSingular,
shouldMatchRootQueryFilter: true,
});
if (!selectFieldMetadataItem) { if (!selectFieldMetadataItem) {
return; return;

View File

@ -10,6 +10,7 @@ import { currentRecordFiltersComponentState } from '@/object-record/record-filte
import { computeRecordGqlOperationFilter } from '@/object-record/record-filter/utils/computeViewRecordGqlOperationFilter'; import { computeRecordGqlOperationFilter } from '@/object-record/record-filter/utils/computeViewRecordGqlOperationFilter';
import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState'; import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState';
import { useRecordBoardRecordGqlFields } from '@/object-record/record-index/hooks/useRecordBoardRecordGqlFields'; import { useRecordBoardRecordGqlFields } from '@/object-record/record-index/hooks/useRecordBoardRecordGqlFields';
import { useSetRecordIndexEntityCount } from '@/object-record/record-index/hooks/useSetRecordIndexEntityCount';
import { recordIndexViewFilterGroupsState } from '@/object-record/record-index/states/recordIndexViewFilterGroupsState'; import { recordIndexViewFilterGroupsState } from '@/object-record/record-index/states/recordIndexViewFilterGroupsState';
import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState'; import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState';
import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore'; import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore';
@ -91,6 +92,7 @@ export const useLoadRecordIndexBoardColumn = ({
fetchMoreRecords, fetchMoreRecords,
queryStateIdentifier, queryStateIdentifier,
hasNextPage, hasNextPage,
totalCount,
} = useFindManyRecords({ } = useFindManyRecords({
objectNameSingular, objectNameSingular,
filter, filter,
@ -99,6 +101,13 @@ export const useLoadRecordIndexBoardColumn = ({
limit: 10, limit: 10,
}); });
const { setRecordIndexEntityCount } =
useSetRecordIndexEntityCount(recordBoardId);
useEffect(() => {
setRecordIndexEntityCount(totalCount ?? 0, columnId);
}, [setRecordIndexEntityCount, totalCount, columnId]);
useEffect(() => { useEffect(() => {
setRecordIdsForColumn(columnId, records); setRecordIdsForColumn(columnId, records);
}, [records, setRecordIdsForColumn, columnId]); }, [records, setRecordIdsForColumn, columnId]);