Improved optimistic rendering (#2649)

front/src/modules/object-record/hooks/useCreateOneObjectRecord.ts

@@ -36,10 +36,8 @@ export const useCreateOneObjectRecord = <T>({
     });
 
     triggerOptimisticEffects(
-      `${capitalize(foundObjectMetadataItem.nameSingular)}Edge`,
-      createdObject.data[
-        `create${capitalize(foundObjectMetadataItem.nameSingular)}`
-      ],
+      `${capitalize(objectNameSingular)}Edge`,
+      createdObject.data[`create${capitalize(objectNameSingular)}`],
     );
     return createdObject.data[`create${capitalize(objectNameSingular)}`] as T;
   };

front/src/modules/object-record/hooks/useDeleteOneObjectRecord.ts

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { useMutation } from '@apollo/client';
-import { getOperationName } from '@apollo/client/utilities';
 
+import { useOptimisticEvict } from '@/apollo/optimistic-effect/hooks/useOptimisticEvict';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { ObjectMetadataItemIdentifier } from '@/object-metadata/types/ObjectMetadataItemIdentifier';
 import { capitalize } from '~/utils/string/capitalize';
@@ -9,10 +9,11 @@ import { capitalize } from '~/utils/string/capitalize';
 export const useDeleteOneObjectRecord = <T>({
   objectNameSingular,
 }: Pick<ObjectMetadataItemIdentifier, 'objectNameSingular'>) => {
+  const { performOptimisticEvict } = useOptimisticEvict();
+
   const {
     objectMetadataItem: foundObjectMetadataItem,
     objectNotFoundInMetadata,
-    findManyQuery,
     deleteOneMutation,
   } = useObjectMetadataItem({
     objectNameSingular,
@@ -31,12 +32,18 @@ export const useDeleteOneObjectRecord = <T>({
         variables: {
           idToDelete,
         },
-        refetchQueries: [getOperationName(findManyQuery) ?? ''],
       });
 
+      performOptimisticEvict(capitalize(objectNameSingular), 'id', idToDelete);
+
       return deletedObject.data[`create${capitalize(objectNameSingular)}`] as T;
     },
-    [foundObjectMetadataItem, mutate, objectNameSingular, findManyQuery],
+    [
+      performOptimisticEvict,
+      foundObjectMetadataItem,
+      mutate,
+      objectNameSingular,
+    ],
   );
 
   return {

front/src/modules/object-record/hooks/useFindManyObjectRecords.ts

@@ -4,8 +4,10 @@ import { isNonEmptyArray } from '@apollo/client/utilities';
 import { isNonEmptyString } from '@sniptt/guards';
 import { useRecoilState } from 'recoil';
 
+import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimisticEffect';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { ObjectMetadataItemIdentifier } from '@/object-metadata/types/ObjectMetadataItemIdentifier';
+import { getRecordOptimisticEffectDefinition } from '@/object-record/graphql/optimistic-effect-definition/getRecordOptimisticEffectDefinition';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { logError } from '~/utils/logError';
 import { capitalize } from '~/utils/string/capitalize';
@@ -53,6 +55,10 @@ export const useFindManyObjectRecords = <
       objectNamePlural,
     });
 
+  const { registerOptimisticEffect } = useOptimisticEffect({
+    objectNameSingular: objectMetadataItem?.nameSingular,
+  });
+
   const { enqueueSnackBar } = useSnackBar();
 
   const { data, loading, error, fetchMore } = useQuery<
@@ -64,6 +70,18 @@ export const useFindManyObjectRecords = <
       orderBy: orderBy ?? {},
     },
     onCompleted: (data) => {
+      if (objectMetadataItem) {
+        registerOptimisticEffect({
+          variables: {
+            filter: filter ?? {},
+            orderBy: orderBy ?? {},
+          },
+          definition: getRecordOptimisticEffectDefinition({
+            objectMetadataItem,
+          }),
+        });
+      }
+
       if (objectNamePlural) {
         onCompleted?.(data[objectNamePlural]);
 

front/src/modules/object-record/hooks/useUpdateOneObjectRecord.ts

@@ -36,6 +36,12 @@ export const useUpdateOneObjectRecord = <T>({
           ...input,
         },
       },
+      optimisticResponse: {
+        [`update${capitalize(objectNameSingular)}`]: {
+          id: idToUpdate,
+          ...input,
+        },
+      },
     });
 
     return updatedObject.data[`update${capitalize(objectNameSingular)}`] as T;