Updated the caching logic

@see apollographql/apollo-client#6760
christfellowshipchurch · Sep 20, 2021 · 00602fa · 00602fa
1 parent 85e9f9a
commit 00602fa
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 28 deletions.
diff --git a/components/Modals/GroupMemberDetailsModal/GroupMemberDetailsModal.js b/components/Modals/GroupMemberDetailsModal/GroupMemberDetailsModal.js
@@ -21,16 +21,39 @@ import { GroupMemberDetails } from 'components';
 import { Box, Modal, Loader } from 'ui-kit';
 
 const GroupMemberDetailsModal = ({ id, onSave: callback }) => {
-  const client = useApolloClient();
   const modalDispatch = useModalDispatch();
   const { groupMemberStatuses, inactiveStatusReasons } =
     useGroupMemberStatuses();
-  const [[updateStatus], [updateNote]] = useEditGroupMember();
+  const [[updateStatus], [updateNote]] = useEditGroupMember({
+    update: (cache, { data }) => {
+      if (data?.updateGroupMemberStatus) {
+        console.log({ data });
+        const { updateGroupMemberStatus } = data;
+        const { id, status: newStatus } = updateGroupMemberStatus;
+
+        cache.modify({
+          id: cache.identify({ __typename: 'GroupMember', id }),
+          fields: {
+            status() {
+              return newStatus;
+            },
+          },
+        });
+
+        cache.modify({
+          id: cache.identify({ __typename: 'GroupMemberSearchResult', id }),
+          fields: {
+            status() {
+              return newStatus.label;
+            },
+          },
+        });
+      }
+    },
+  });
   const { groupMember, loading } = useGroupMember({ variables: { id } });
   const [isLoading, setIsLoading] = useState(loading);
 
-  const { cache } = client;
-
   const onCancel = () => {
     modalDispatch(hideModal());
   };
@@ -42,32 +65,34 @@ const GroupMemberDetailsModal = ({ id, onSave: callback }) => {
     inactiveStatusReason,
   }) => {
     setIsLoading(true);
+    // note : only run the mutation if the value has actually changed
+    const statusPromise = () => {
+      if (status !== groupMember.status.id) {
+        return updateStatus({
+          variables: {
+            groupMemberId,
+            groupMemberStatusId: status,
+            inactiveStatusReasonId: inactiveStatusReason,
+          },
+        });
+      }
+
+      return Promise.resolve();
+    };
+    const notePromise = () => {
+      if (note !== groupMember.note) {
+        return updateNote({
+          variables: {
+            groupMemberId,
+            note,
+          },
+        });
+      }
 
-    await Promise.all([
-      updateStatus({
-        variables: {
-          groupMemberId,
-          groupMemberStatusId: status,
-          inactiveStatusReasonId: inactiveStatusReason,
-        },
-      }),
-      updateNote({
-        variables: {
-          groupMemberId,
-          note,
-        },
-      }),
-    ]);
+      return Promise.resolve();
+    };
 
-    cache.modify({
-      id: cache.identify({ __typename: 'GroupMemberSearchResult', id }),
-      fields: {
-        status() {
-          const newStatus = groupMemberStatuses.find(({ id }) => id === status);
-          return newStatus.label;
-        },
-      },
-    });
+    await Promise.all([statusPromise(), notePromise()]);
 
     onCancel();
   };

diff --git a/hooks/useEditGroupMember.js b/hooks/useEditGroupMember.js
@@ -21,6 +21,10 @@ export const UPDATE_GROUP_MEMBER_STATUS = gql`
       inactiveStatusReasonId: $inactiveStatusReasonId
     ) {
       id
+      status {
+        id
+        label
+      }
     }
   }
 `;
@@ -29,6 +33,7 @@ export const UPDATE_GROUP_MEMBER_NOTE = gql`
   mutation updateGroupMemberNote($groupMemberId: ID!, $note: String) {
     updateGroupMemberNote(groupMemberId: $groupMemberId, text: $note) {
       id
+      note
     }
   }
 `;

diff --git a/hooks/useSearchGroupMembers.js b/hooks/useSearchGroupMembers.js
@@ -47,6 +47,7 @@ function useSearchGroupMembers(options = {}) {
   });
   const [searchGroupMembers, query] = useLazyQuery(SEARCH_GROUP_MEMBERS, {
     fetchPolicy: 'cache-and-network',
+    nextFetchPolicy: 'cache-first',
     ...options,
   });