refactor: apply relation optimistic effects on record update (#3556)

* refactor: apply relation optimistic effects on record update

Related to #3509

* refactor: remove need to pass relation id field to create and update mutations

* fix: fix tests

* fix: fix SingleEntitySelect glitch

* fix: fix usePersistField tests

* fix: fix wrong import after rebase

* fix: fix several tests

* fix: fix test types

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

@@ -28,21 +28,27 @@ export const useCreateOneRecord = <
   });
 
   const createOneRecord = async (input: Partial<CreatedObjectRecord>) => {
-    const optimisticallyCreatedRecord =
-      generateCachedObjectRecord<CreatedObjectRecord>(input);
-
     const sanitizedCreateOneRecordInput = sanitizeRecordInput({
       objectMetadataItem,
-      recordInput: { ...input, id: optimisticallyCreatedRecord.id },
+      recordInput: input,
     });
 
+    const optimisticallyCreatedRecord =
+      generateCachedObjectRecord<CreatedObjectRecord>({
+        ...input,
+        ...sanitizedCreateOneRecordInput,
+      });
+
     const mutationResponseField =
       getCreateOneRecordMutationResponseField(objectNameSingular);
 
     const createdObject = await apolloClient.mutate({
       mutation: createOneRecordMutation,
       variables: {
-        input: sanitizedCreateOneRecordInput,
+        input: {
+          ...sanitizedCreateOneRecordInput,
+          id: optimisticallyCreatedRecord.id,
+        },
       },
       optimisticResponse: {
         [mutationResponseField]: optimisticallyCreatedRecord,

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

@@ -37,7 +37,7 @@ export const useGetRecordFromCache = ({
       id: recordId,
     });
 
-    return cache.readFragment<CachedObjectRecord>({
+    return cache.readFragment<CachedObjectRecord & { __typename: string }>({
       id: cachedRecordId,
       fragment: cacheReadFragment,
     });

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

@@ -12,7 +12,7 @@ export const useModifyRecordFromCache = ({
 }) => {
   const { cache } = useApolloClient();
 
-  return <CachedObjectRecord extends ObjectRecord>(
+  return <CachedObjectRecord extends ObjectRecord = ObjectRecord>(
     recordId: string,
     fieldModifiers: Modifiers<CachedObjectRecord>,
   ) => {

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

@@ -1,6 +1,8 @@
 import { useApolloClient } from '@apollo/client';
 
+import { useGetRelationFieldsToOptimisticallyUpdate } from '@/apollo/optimistic-effect/hooks/useGetRelationFieldsToOptimisticallyUpdate';
 import { triggerUpdateRecordOptimisticEffect } from '@/apollo/optimistic-effect/utils/triggerUpdateRecordOptimisticEffect';
+import { triggerUpdateRelationFieldOptimisticEffect } from '@/apollo/optimistic-effect/utils/triggerUpdateRelationFieldOptimisticEffect';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { getUpdateOneRecordMutationResponseField } from '@/object-record/hooks/useGenerateUpdateOneRecordMutation';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
@@ -19,6 +21,9 @@ export const useUpdateOneRecord = <
   const { objectMetadataItem, updateOneRecordMutation, getRecordFromCache } =
     useObjectMetadataItem({ objectNameSingular });
 
+  const getRelationFieldsToOptimisticallyUpdate =
+    useGetRelationFieldsToOptimisticallyUpdate();
+
   const apolloClient = useApolloClient();
 
   const updateOneRecord = async ({
@@ -30,18 +35,27 @@ export const useUpdateOneRecord = <
   }) => {
     const cachedRecord = getRecordFromCache<UpdatedObjectRecord>(idToUpdate);
 
-    const optimisticallyUpdatedRecord = {
-      ...(cachedRecord ?? {}),
-      ...updateOneRecordInput,
-      __typename: capitalize(objectNameSingular),
-      id: idToUpdate,
-    };
-
     const sanitizedUpdateOneRecordInput = sanitizeRecordInput({
       objectMetadataItem,
       recordInput: updateOneRecordInput,
     });
 
+    const optimisticallyUpdatedRecord = {
+      ...(cachedRecord ?? {}),
+      ...updateOneRecordInput,
+      ...sanitizedUpdateOneRecordInput,
+      __typename: capitalize(objectNameSingular),
+      id: idToUpdate,
+    };
+
+    const updatedRelationFields = cachedRecord
+      ? getRelationFieldsToOptimisticallyUpdate({
+          cachedRecord,
+          objectMetadataItem,
+          updateRecordInput: updateOneRecordInput,
+        })
+      : [];
+
     const mutationResponseField =
       getUpdateOneRecordMutationResponseField(objectNameSingular);
 
@@ -64,6 +78,24 @@ export const useUpdateOneRecord = <
           objectMetadataItem,
           record,
         });
+
+        updatedRelationFields.forEach(
+          ({
+            relationObjectMetadataNameSingular,
+            relationFieldName,
+            previousRelationRecord,
+            nextRelationRecord,
+          }) =>
+            triggerUpdateRelationFieldOptimisticEffect({
+              cache,
+              objectNameSingular,
+              record,
+              relationObjectMetadataNameSingular,
+              relationFieldName,
+              previousRelationRecord,
+              nextRelationRecord,
+            }),
+        );
       },
     });