admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Refacto views (#10272)

Browse Source 
In this huge (sorry!) PR:
- introducing objectMetadataItem in contextStore instead of
objectMetadataId which is more convenient
- splitting some big hooks into smaller parts to avoid re-renders
- removing Effects to avoid re-renders (especially onViewChange)
- making the view prefetch separate from favorites to avoid re-renders
- making the view prefetch load a state and add selectors on top of it
to avoir re-renders

As a result, the performance is WAY better (I suspect the favorite
implementation to trigger a lot of re-renders unfortunately).
However, we are still facing a random app freeze on view creation. I
could not investigate the root cause. As this seems to be already there
in the precedent release, we can move forward but this seems a urgent
follow up to me ==> EDIT: I've found the root cause after a few ours of
deep dive... an infinite loop in RecordTableNoRecordGroupBodyEffect...

prastoin edit: close https://github.com/twentyhq/twenty/issues/10253

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: prastoin <paul@twenty.com>
This commit is contained in:
Charles Bochet
2025-02-18 13:51:07 +01:00
committed by GitHub
parent 103dff4bd0
commit fb42046033
125 changed files with 1607 additions and 1582 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
packages/twenty-front/src/modules/prefetch/hooks/internal/useUpsertRecordsInCacheForPrefetchKey.ts
View File

@ -1,51 +0,0 @@
import { useSetRecoilState } from 'recoil';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { useUpsertFindManyRecordsQueryInCache } from '@/object-record/cache/hooks/useUpsertFindManyRecordsQueryInCache';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { PREFETCH_CONFIG } from '@/prefetch/constants/PrefetchConfig';
import { prefetchIsLoadedFamilyState } from '@/prefetch/states/prefetchIsLoadedFamilyState';
import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
export type UsePrefetchRunQuery = {
prefetchKey: PrefetchKey;
};
export const useUpsertRecordsInCacheForPrefetchKey = <T extends ObjectRecord>({
prefetchKey,
}: UsePrefetchRunQuery) => {
const setPrefetchDataIsLoaded = useSetRecoilState(
prefetchIsLoadedFamilyState(prefetchKey),
);
const { operationSignatureFactory, objectNameSingular } =
PREFETCH_CONFIG[prefetchKey];
const { objectMetadataItem } = useObjectMetadataItem({
objectNameSingular,
});
const operationSignature = operationSignatureFactory({ objectMetadataItem });
const { upsertFindManyRecordsQueryInCache } =
useUpsertFindManyRecordsQueryInCache({
objectMetadataItem: objectMetadataItem,
});
const upsertRecordsInCache = (records: T[]) => {
setPrefetchDataIsLoaded(false);
upsertFindManyRecordsQueryInCache({
queryVariables: operationSignature.variables,
recordGqlFields: operationSignature.fields,
objectRecordsToOverwrite: records,
computeReferences: false,
});
setPrefetchDataIsLoaded(true);
};
return {
objectMetadataItem,
upsertRecordsInCache,
};
};

7
packages/twenty-front/src/modules/prefetch/hooks/useIsPrefetchLoading.ts
View File

@ -9,17 +9,12 @@ export const useIsPrefetchLoading = () => {
prefetchIsLoadedFamilyState(PrefetchKey.AllFavoritesFolders),
);
const areViewsPrefetched = useRecoilValue(
prefetchIsLoadedFamilyState(PrefetchKey.AllViews),
);
const areFavoritesPrefetched = useRecoilValue(
prefetchIsLoadedFamilyState(PrefetchKey.AllFavorites),
);
return (
!isWorkspaceSuspended &&
(!areViewsPrefetched ||
!areFavoritesPrefetched ||
!isFavoriteFoldersPrefetched)
(!areFavoritesPrefetched || !isFavoriteFoldersPrefetched)
);
};

30
packages/twenty-front/src/modules/prefetch/hooks/useLazyPrefetchData.ts
View File

@ -1,30 +0,0 @@
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { RecordGqlOperationFilter } from '@/object-record/graphql/types/RecordGqlOperationFilter';
import { useLazyFindManyRecords } from '@/object-record/hooks/useLazyFindManyRecords';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { PREFETCH_CONFIG } from '@/prefetch/constants/PrefetchConfig';
import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
export const useLazyPrefetchedData = <T extends ObjectRecord>(
prefetchKey: PrefetchKey,
filter?: RecordGqlOperationFilter,
) => {
const { operationSignatureFactory, objectNameSingular } =
PREFETCH_CONFIG[prefetchKey];
const { objectMetadataItem } = useObjectMetadataItem({
objectNameSingular,
});
const recordGqlFields =
operationSignatureFactory({ objectMetadataItem }).fields ?? filter;
const { records, findManyRecords } = useLazyFindManyRecords<T>({
objectNameSingular: objectNameSingular,
recordGqlFields,
});
return {
findManyRecords,
records,
};
};

38
packages/twenty-front/src/modules/prefetch/hooks/usePrefetchedData.ts
View File

@ -1,38 +0,0 @@
import { useRecoilValue } from 'recoil';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { RecordGqlOperationFilter } from '@/object-record/graphql/types/RecordGqlOperationFilter';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { PREFETCH_CONFIG } from '@/prefetch/constants/PrefetchConfig';
import { prefetchIsLoadedFamilyState } from '@/prefetch/states/prefetchIsLoadedFamilyState';
import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
export const usePrefetchedData = <T extends ObjectRecord>(
prefetchKey: PrefetchKey,
filter?: RecordGqlOperationFilter,
) => {
const isDataPrefetched = useRecoilValue(
prefetchIsLoadedFamilyState(prefetchKey),
);
const { operationSignatureFactory, objectNameSingular } =
PREFETCH_CONFIG[prefetchKey];
const { objectMetadataItem } = useObjectMetadataItem({
objectNameSingular,
});
const recordGqlFields =
operationSignatureFactory({ objectMetadataItem }).fields ?? filter;
const { records } = useFindManyRecords<T>({
skip: !isDataPrefetched,
objectNameSingular: objectNameSingular,
recordGqlFields,
});
return {
isDataPrefetched,
records,
};
};