Feature/optmistically render table create & remove (#1156)

* Add optimistic updates on company table

* Add optimistic rendering for tables too

* Fix schema

front/src/modules/people/queries/update.ts

@@ -26,25 +26,20 @@ export const UPDATE_ONE_PERSON = gql`
   }
 `;
 
+export const INSERT_PERSON_FRAGMENT = gql`
+  fragment InsertPersonFragment on Person {
+    id
+    firstName
+    lastName
+    displayName
+    createdAt
+  }
+`;
+
 export const INSERT_ONE_PERSON = gql`
   mutation InsertOnePerson($data: PersonCreateInput!) {
     createOnePerson(data: $data) {
-      id
-      city
-      company {
-        domainName
-        name
-        id
-      }
-      email
-      firstName
-      lastName
-      jobTitle
-      linkedinUrl
-      xUrl
-      displayName
-      phone
-      createdAt
+      ...InsertPersonFragment
     }
   }
 `;

front/src/modules/people/table/components/TableActionBarButtonDeletePeople.tsx

@@ -1,15 +1,17 @@
 import { getOperationName } from '@apollo/client/utilities';
-import { useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { GET_PEOPLE } from '@/people/queries';
 import { IconTrash } from '@/ui/icon/index';
 import { EntityTableActionBarButton } from '@/ui/table/action-bar/components/EntityTableActionBarButton';
 import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
 import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
+import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
 import { useDeleteManyPersonMutation } from '~/generated/graphql';
 
 export function TableActionBarButtonDeletePeople() {
   const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
+  const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
 
   const resetRowSelection = useResetTableRowSelection();
 
@@ -26,6 +28,17 @@ export function TableActionBarButtonDeletePeople() {
       variables: {
         ids: rowIdsToDelete,
       },
+      optimisticResponse: {
+        __typename: 'Mutation',
+        deleteManyPerson: {
+          count: rowIdsToDelete.length,
+        },
+      },
+      update: () => {
+        setTableRowIds(
+          tableRowIds.filter((id) => !rowIdsToDelete.includes(id)),
+        );
+      },
     });
   }