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

* Add optimistic updates on company table

* Add optimistic rendering for tables too

* Fix schema

front/src/pages/companies/Companies.tsx

@@ -1,20 +1,21 @@
 import { getOperationName } from '@apollo/client/utilities';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
+import { v4 } from 'uuid';
 
-import { GET_COMPANIES } from '@/companies/queries';
 import { CompanyTable } from '@/companies/table/components/CompanyTable';
 import { TableActionBarButtonCreateActivityCompany } from '@/companies/table/components/TableActionBarButtonCreateActivityCompany';
 import { TableActionBarButtonDeleteCompanies } from '@/companies/table/components/TableActionBarButtonDeleteCompanies';
+import { SEARCH_COMPANY_QUERY } from '@/search/queries/search';
 import { IconBuildingSkyscraper } from '@/ui/icon';
 import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
 import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar';
 import { TableContext } from '@/ui/table/states/TableContext';
+import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { useInsertOneCompanyMutation } from '~/generated/graphql';
 
-import { SEARCH_COMPANY_QUERY } from '../../modules/search/queries/search';
-
 const StyledTableContainer = styled.div`
   display: flex;
   width: 100%;
@@ -22,20 +23,35 @@ const StyledTableContainer = styled.div`
 
 export function Companies() {
   const [insertCompany] = useInsertOneCompanyMutation();
+  const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
 
   async function handleAddButtonClick() {
+    const newCompanyId: string = v4();
     await insertCompany({
       variables: {
         data: {
+          id: newCompanyId,
           name: '',
           domainName: '',
           address: '',
         },
       },
-      refetchQueries: [
-        getOperationName(GET_COMPANIES) ?? '',
-        getOperationName(SEARCH_COMPANY_QUERY) ?? '',
-      ],
+      optimisticResponse: {
+        __typename: 'Mutation',
+        createOneCompany: {
+          __typename: 'Company',
+          id: newCompanyId,
+          name: '',
+          domainName: '',
+          address: '',
+          createdAt: '',
+        },
+      },
+      update: (cache, { data }) => {
+        data?.createOneCompany.id &&
+          setTableRowIds([data?.createOneCompany.id, ...tableRowIds]);
+      },
+      refetchQueries: [getOperationName(SEARCH_COMPANY_QUERY) ?? ''],
     });
   }
 

front/src/pages/people/People.tsx

@@ -1,8 +1,8 @@
-import { getOperationName } from '@apollo/client/utilities';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
+import { v4 } from 'uuid';
 
-import { GET_PEOPLE } from '@/people/queries';
 import { PeopleTable } from '@/people/table/components/PeopleTable';
 import { TableActionBarButtonCreateActivityPeople } from '@/people/table/components/TableActionBarButtonCreateActivityPeople';
 import { TableActionBarButtonDeletePeople } from '@/people/table/components/TableActionBarButtonDeletePeople';
@@ -10,6 +10,7 @@ import { IconUser } from '@/ui/icon';
 import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
 import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar';
 import { TableContext } from '@/ui/table/states/TableContext';
+import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { useInsertOnePersonMutation } from '~/generated/graphql';
 
@@ -20,16 +21,33 @@ const StyledTableContainer = styled.div`
 
 export function People() {
   const [insertOnePerson] = useInsertOnePersonMutation();
+  const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
 
   async function handleAddButtonClick() {
+    const newPersonId: string = v4();
     await insertOnePerson({
       variables: {
         data: {
+          id: newPersonId,
           firstName: '',
           lastName: '',
         },
       },
-      refetchQueries: [getOperationName(GET_PEOPLE) ?? ''],
+      optimisticResponse: {
+        __typename: 'Mutation',
+        createOnePerson: {
+          __typename: 'Person',
+          id: newPersonId,
+          firstName: '',
+          lastName: '',
+          displayName: '',
+          createdAt: '',
+        },
+      },
+      update: (cache, { data }) => {
+        data?.createOnePerson?.id &&
+          setTableRowIds([data?.createOnePerson.id, ...tableRowIds]);
+      },
     });
   }