Add optimistic rendering for tasks (#1140)

* Add optimistic rendering for tasks

* Refetch activities for lists updates

front/src/modules/activities/hooks/useCompleteTask.ts

@@ -1,32 +1,43 @@
 import { useCallback } from 'react';
-import { getOperationName } from '@apollo/client/utilities';
+import { useApolloClient } from '@apollo/client';
 
-import {
-  GET_ACTIVITIES,
-  GET_ACTIVITIES_BY_TARGETS,
-} from '@/activities/queries';
 import { Activity, useUpdateActivityMutation } from '~/generated/graphql';
 
+import { ACTIVITY_UPDATE_FRAGMENT } from '../queries/update';
+
 type Task = Pick<Activity, 'id'>;
 
 export function useCompleteTask(task: Task) {
   const [updateActivityMutation] = useUpdateActivityMutation();
+
+  const client = useApolloClient();
+  const cachedTask = client.readFragment({
+    id: `Activity:${task.id}`,
+    fragment: ACTIVITY_UPDATE_FRAGMENT,
+  });
+
+  console.log('cachedTask', cachedTask);
+
   const completeTask = useCallback(
     (value: boolean) => {
+      const completedAt = value ? new Date().toISOString() : null;
       updateActivityMutation({
         variables: {
           where: { id: task.id },
           data: {
-            completedAt: value ? new Date().toISOString() : null,
+            completedAt,
+          },
+        },
+        optimisticResponse: {
+          __typename: 'Mutation',
+          updateOneActivity: {
+            ...cachedTask,
+            completedAt,
           },
         },
-        refetchQueries: [
-          getOperationName(GET_ACTIVITIES_BY_TARGETS) ?? '',
-          getOperationName(GET_ACTIVITIES) ?? '',
-        ],
       });
     },
-    [task, updateActivityMutation],
+    [cachedTask, task.id, updateActivityMutation],
   );
 
   return {