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/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)),
+        );
+      },
     });
   }