Abstract useGridMutation

This does a couple of things:
- It DRYs the reasoning why don't await results & use optimistic responses.
- It drastically pares down the isEqual input to what could be changed.

Author: CarsonF

src/components/EngagementDataGrid/useProcessEngagementUpdate.ts

@@ -1,57 +1,25 @@
-import { useMutation } from '@apollo/client';
-import { isEqual } from 'lodash';
-import { UpdateLanguageEngagement as UpdateLanguageEngagementInput } from '~/api/schema.graphql';
-import { EngagementDataGridRowFragment } from './engagementDataGridRow.graphql';
+import { useGridMutation } from '../Grid';
+import { EngagementDataGridRowFragmentDoc as EngagementGridRow } from './engagementDataGridRow.graphql';
 import { UpdateLanguageEngagementGridDocument as UpdateLanguageEngagement } from './UpdateLanguageEngagementGrid.graphql';
 
-export const useProcessEngagementUpdate = () => {
-  const [updateLanguageEngagement] = useMutation(UpdateLanguageEngagement);
-
-  return (
-    updated: EngagementDataGridRowFragment,
-    prev: EngagementDataGridRowFragment
-  ) => {
-    if (updated.__typename !== 'LanguageEngagement') {
-      return updated;
-    }
-
-    if (isEqual(updated, prev)) {
-      return updated;
+export const useProcessEngagementUpdate = () =>
+  useGridMutation(EngagementGridRow, UpdateLanguageEngagement, (row) => {
+    if (row.__typename !== 'LanguageEngagement') {
+      return undefined;
     }
-
-    const input: UpdateLanguageEngagementInput = {
-      id: updated.id,
-      milestoneReached: updated.milestoneReached.value,
-      usingAIAssistedTranslation: updated.usingAIAssistedTranslation.value,
-    };
-    // Don't wait for the mutation to finish/error, which allows
-    // the grid to close the editing state immediately.
-    // There shouldn't be any business errors from these current changes,
-    // and network errors are handled with snackbars.
-    // Additionally, MUI doesn't handle thrown errors either; it just gives
-    // them straight back to us on the `onProcessRowUpdateError` callback.
-    void updateLanguageEngagement({
-      variables: { input },
-      // Inform Apollo of these async/queued updates.
-      // This is important because users can make multiple changes
-      // quickly, since we don't `await` above.
-      // These optimistic updates are layered/stacked.
-      // So if two value changes are in flight, the value from the first
-      // API response isn't presented as the latest value,
-      // since there is still another optimistic update left.
-      // Said another way: this prevents the UI from presenting the final change,
-      // then looking like it reverted to the first change,
-      // and then flipping back to the final change again.
-      // This also ensures these pending updates are maintained
-      // even if the grid is unmounted/remounted.
+    return {
+      variables: {
+        input: {
+          id: row.id,
+          milestoneReached: row.milestoneReached.value,
+          usingAIAssistedTranslation: row.usingAIAssistedTranslation.value,
+        },
+      },
       optimisticResponse: {
         updateLanguageEngagement: {
           __typename: 'UpdateLanguageEngagementOutput',
-          engagement: updated,
+          engagement: row,
         },
       },
-    });
-
-    return updated;
-  };
-};
+    };
+  });

src/components/Grid/index.tsx

@@ -13,3 +13,4 @@ export * from './QuickFilters';
 export * from './ColumnTypes/multiEnumColumn';
 export * from './ColumnTypes/dateColumn';
 export * from './isCellEditable';
+export * from './useGridMutation';

src/components/Grid/useGridMutation.ts

@@ -0,0 +1,56 @@
+import { useMutation } from '@apollo/client';
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+import { isEqual } from 'lodash';
+
+export const useGridMutation = <Row, MutationRes, Vars>(
+  rowShape: DocumentNode<Row>,
+  mutation: DocumentNode<MutationRes, Vars>,
+  makeInput: NoInfer<
+    (object: Row) =>
+      | {
+          variables: Vars;
+          optimisticResponse: MutationRes;
+        }
+      | undefined
+  >
+) => {
+  const [update] = useMutation(mutation);
+
+  return (updatedRow: Row, prevRow: Row) => {
+    const updatedInput = makeInput(updatedRow);
+    const prevInput = makeInput(prevRow);
+
+    if (!updatedInput || !prevInput) {
+      return updatedRow;
+    }
+
+    if (isEqual(updatedInput.variables, prevInput.variables)) {
+      return updatedRow;
+    }
+
+    // Don't wait for the mutation to finish/error, which allows
+    // the grid to close the editing state immediately.
+    // There shouldn't be any business errors from these current changes,
+    // and network errors are handled with snackbars.
+    // Additionally, MUI doesn't handle thrown errors either; it just gives
+    // them straight back to us on the `onProcessRowUpdateError` callback.
+    void update({
+      variables: updatedInput.variables,
+      // Inform Apollo of these async/queued updates.
+      // This is important because users can make multiple changes
+      // quickly, since we don't `await` above.
+      // These optimistic updates are layered/stacked.
+      // So if two value changes are in flight, the value from the first
+      // API response isn't presented as the latest value,
+      // since there is still another optimistic update left.
+      // Said another way: this prevents the UI from presenting the final change,
+      // then looking like it reverted to the first change,
+      // and then flipping back to the final change again.
+      // This also ensures these pending updates are maintained
+      // even if the grid is unmounted/remounted.
+      optimisticResponse: updatedInput.optimisticResponse,
+    });
+
+    return updatedRow;
+  };
+};