Improved optimistic rendering (#2649)

front/src/modules/activities/notes/hooks/useNotes.ts

@@ -1,7 +1,4 @@
 import { Note } from '@/activities/types/Note';
-import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimisticEffect';
-import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
-import { getRecordOptimisticEffectDefinition } from '@/object-record/graphql/optimistic-effect-definition/getRecordOptimisticEffectDefinition';
 import { useFindManyObjectRecords } from '@/object-record/hooks/useFindManyObjectRecords';
 
 import { ActivityTargetableEntity } from '../../types/ActivityTargetableEntity';
@@ -14,15 +11,6 @@ export const useNotes = (entity: ActivityTargetableEntity) => {
     },
   });
 
-  const { objectMetadataItem: activityObjectMetadataItem } =
-    useObjectMetadataItem({
-      objectNameSingular: 'activity',
-    });
-
-  const { registerOptimisticEffect } = useOptimisticEffect({
-    objectNameSingular: activityObjectMetadataItem?.nameSingular,
-  });
-
   const filter = {
     id: {
       in: activityTargets?.map((activityTarget) => activityTarget.activityId),
@@ -38,16 +26,6 @@ export const useNotes = (entity: ActivityTargetableEntity) => {
     objectNamePlural: 'activities',
     filter,
     orderBy,
-    onCompleted: () => {
-      if (activityObjectMetadataItem) {
-        registerOptimisticEffect({
-          variables: { orderBy, filter },
-          definition: getRecordOptimisticEffectDefinition({
-            objectMetadataItem: activityObjectMetadataItem,
-          }),
-        });
-      }
-    },
   });
 
   return {

front/src/modules/activities/tasks/hooks/useTasks.ts

@@ -2,9 +2,6 @@ import { DateTime } from 'luxon';
 
 import { Activity } from '@/activities/types/Activity';
 import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
-import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimisticEffect';
-import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
-import { getRecordOptimisticEffectDefinition } from '@/object-record/graphql/optimistic-effect-definition/getRecordOptimisticEffectDefinition';
 import { useFindManyObjectRecords } from '@/object-record/hooks/useFindManyObjectRecords';
 import { useFilter } from '@/ui/object/object-filter-dropdown/hooks/useFilter';
 import { parseDate } from '~/utils/date-utils';
@@ -21,15 +18,6 @@ export const useTasks = (entity?: ActivityTargetableEntity) => {
     },
   });
 
-  const { objectMetadataItem: activityObjectMetadataItem } =
-    useObjectMetadataItem({
-      objectNameSingular: 'activity',
-    });
-
-  const { registerOptimisticEffect } = useOptimisticEffect({
-    objectNameSingular: activityObjectMetadataItem?.nameSingular,
-  });
-
   const { objects: completeTasksData } = useFindManyObjectRecords({
     objectNamePlural: 'activities',
     skip: !entity && !selectedFilter,
@@ -43,29 +31,6 @@ export const useTasks = (entity?: ActivityTargetableEntity) => {
     orderBy: {
       createdAt: 'DescNullsFirst',
     },
-    onCompleted: () => {
-      if (activityObjectMetadataItem) {
-        registerOptimisticEffect({
-          variables: {
-            filter: {
-              completedAt: { is: 'NOT_NULL' },
-              id: {
-                in: activityTargets?.map(
-                  (activityTarget) => activityTarget.activityId,
-                ),
-              },
-              type: { eq: 'Task' },
-            },
-            orderBy: {
-              createdAt: 'DescNullsFirst',
-            },
-          },
-          definition: getRecordOptimisticEffectDefinition({
-            objectMetadataItem: activityObjectMetadataItem,
-          }),
-        });
-      }
-    },
   });
 
   const { objects: incompleteTaskData } = useFindManyObjectRecords({
@@ -81,29 +46,6 @@ export const useTasks = (entity?: ActivityTargetableEntity) => {
     orderBy: {
       createdAt: 'DescNullsFirst',
     },
-    onCompleted: () => {
-      if (activityObjectMetadataItem) {
-        registerOptimisticEffect({
-          variables: {
-            filter: {
-              completedAt: { is: 'NULL' },
-              id: {
-                in: activityTargets?.map(
-                  (activityTarget) => activityTarget.activityId,
-                ),
-              },
-              type: { eq: 'Task' },
-            },
-            orderBy: {
-              createdAt: 'DescNullsFirst',
-            },
-          },
-          definition: getRecordOptimisticEffectDefinition({
-            objectMetadataItem: activityObjectMetadataItem,
-          }),
-        });
-      }
-    },
   });
 
   const todayOrPreviousTasks = incompleteTaskData?.filter((task) => {

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

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