Introduce useOptimisticEvict (#1629)

front/src/modules/apollo/optimistic-effect/hooks/useOptimisticEffect.ts

@@ -18,12 +18,12 @@ export const useOptimisticEffect = () => {
 
   const registerOptimisticEffect = useRecoilCallback(
     ({ snapshot, set }) =>
-      ({
+      <T>({
         variables,
         definition,
       }: {
         variables: OperationVariables;
-        definition: OptimisticEffectDefinition<unknown>;
+        definition: OptimisticEffectDefinition<T>;
       }) => {
         const optimisticEffects = snapshot
           .getLoadable(optimisticEffectState)
@@ -55,8 +55,8 @@ export const useOptimisticEffect = () => {
               variables,
               data: {
                 people: definition.resolver({
-                  currentData: (existingData as GetPeopleQuery).people,
-                  newData,
+                  currentData: (existingData as GetPeopleQuery).people as T[],
+                  newData: newData as T[],
                   variables,
                 }),
               },
@@ -69,8 +69,9 @@ export const useOptimisticEffect = () => {
               variables,
               data: {
                 companies: definition.resolver({
-                  currentData: (existingData as GetCompaniesQuery).companies,
-                  newData,
+                  currentData: (existingData as GetCompaniesQuery)
+                    .companies as T[],
+                  newData: newData as T[],
                   variables,
                 }),
               },

front/src/modules/apollo/optimistic-effect/hooks/useOptimisticEvict.ts

@@ -0,0 +1,24 @@
+import { useApolloClient } from '@apollo/client';
+
+export const useOptimisticEvict = () => {
+  const cache = useApolloClient().cache;
+
+  const performOptimisticEvict = (
+    typename: string,
+    fieldName: string,
+    fieldValue: string,
+  ) => {
+    const serializedCache = cache.extract();
+
+    Object.values(serializedCache)
+      .filter((item) => item.__typename === typename)
+      .forEach((item) => {
+        if (item[fieldName] === fieldValue) {
+          cache.evict({ id: cache.identify(item) });
+        }
+      });
+  };
+  return {
+    performOptimisticEvict,
+  };
+};

front/src/modules/companies/hooks/useDeleteCompanies.ts

@@ -1,6 +1,7 @@
 import { getOperationName } from '@apollo/client/utilities';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
+import { useOptimisticEvict } from '@/apollo/optimistic-effect/hooks/useOptimisticEvict';
 import { GET_PIPELINES } from '@/pipeline/graphql/queries/getPipelines';
 import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
 import { selectedRowIdsSelector } from '@/ui/table/states/selectors/selectedRowIdsSelector';
@@ -15,6 +16,7 @@ export const useDeleteSelectedComapnies = () => {
   const [deleteCompanies] = useDeleteManyCompaniesMutation({
     refetchQueries: [getOperationName(GET_PIPELINES) ?? ''],
   });
+  const { performOptimisticEvict } = useOptimisticEvict();
 
   const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
 
@@ -42,6 +44,9 @@ export const useDeleteSelectedComapnies = () => {
           cache.evict({
             id: cache.identify({ __typename: 'Company', id: companyId }),
           });
+
+          performOptimisticEvict('PipelineProgress', 'companyId', companyId);
+
           cache.gc();
         });
       },