Refactor Apollo onCompleted callbacks

This resolves the issue described at apollographql/apollo-client#6301

Perform Yarn upgrade. Bump minor version.

package.json

@@ -1,13 +1,13 @@
 {
   "name": "@cecilian-archives/uploader",
-  "version": "2.6.3",
+  "version": "2.7.0",
   "author": {
     "name": "Ben Galloway",
     "email": "[email protected]"
   },
   "private": true,
   "dependencies": {
-    "@apollo/client": "3.0.0-beta.45",
+    "@apollo/client": "3.0.0-rc.9",
     "@date-io/date-fns": "1.3.13",
     "@material-ui/core": "^4.9.7",
     "@material-ui/icons": "^4.9.1",
@@ -19,13 +19,13 @@
     "date-fns": "^2.13.0",
     "firebase": "^7.14.2",
     "graphql": "^14.6.0",
+    "history": "^5.0.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-firebaseui": "^4.1.0",
     "react-image": "^3.0.3",
     "react-image-crop": "^8.6.2",
-    "react-router": "^6.0.0-alpha.2",
-    "react-router-dom": "^6.0.0-alpha.2",
+    "react-router-dom": "^6.0.0-beta.0",
     "react-scripts": "3.4.1"
   },
   "scripts": {

src/components/person/LoadPersonTags.js

@@ -86,14 +86,8 @@ const LoadPersonTags = ({
   const classes = useStyles();
   const [statusToDisplay, setStatusToDisplay] = React.useState("");
 
-  const [getPerson, { loading, error, data }] = useLazyQuery(GET_PERSON, {
-    variables: { personId: currentPerson?.person?.id },
-    fetchPolicy: "network-only",
-    errorPolicy: "none",
-    partialRefetch: true,
-    returnPartialData: true,
-    notifyOnNetworkStatusChange: true,
-    onCompleted: () => {
+  const queryCompleted = React.useCallback(
+    (data) => {
       const tags = data?.getCecilianById?.tags || [];
       setStatusToDisplay(
         `Loaded tags for ${currentPerson.person.name}${
@@ -102,11 +96,27 @@ const LoadPersonTags = ({
       );
       successCallback && successCallback(tags);
     },
-    onError: () => {
+    [setStatusToDisplay, successCallback, currentPerson]
+  );
+
+  const queryErrored = React.useCallback(
+    (error) => {
       setStatusToDisplay(
         `Could not load tags for ${currentPerson?.person?.name}. Error was: ${error}`
       );
     },
+    [setStatusToDisplay, currentPerson]
+  );
+
+  const [getPerson, { loading }] = useLazyQuery(GET_PERSON, {
+    variables: { personId: currentPerson?.person?.id },
+    fetchPolicy: "network-only",
+    errorPolicy: "none",
+    partialRefetch: true,
+    returnPartialData: true,
+    notifyOnNetworkStatusChange: true,
+    onCompleted: queryCompleted,
+    onError: queryErrored,
   });
 
   const getPersonData = () => {

src/components/root/MinutesPage.js

@@ -50,16 +50,13 @@ const MinutesPage = () => {
   const [uploadCompleted, setUploadCompleted] = React.useState(false);
   const [uploadError, setUploadError] = React.useState(false);
 
-  const [addArchiveItem, { loading, error, data }] = useMutation(
-    ADD_ARCHIVE_ITEM,
-    {
-      onCompleted: () => {
-        setUploadCompleted(true);
-        console.log(`Successful upload: ${data.id}`);
-      },
-      onError: () => setUploadError(error),
-    }
-  );
+  const [addArchiveItem, { loading }] = useMutation(ADD_ARCHIVE_ITEM, {
+    onCompleted: (data) => {
+      setUploadCompleted(true);
+      console.log(`Successful upload: ${data.setArchiveItem.id}`);
+    },
+    onError: (error) => setUploadError(error),
+  });
 
   const resetState = async () => {
     await uppy.reset();

src/components/root/PhotosPage.js

@@ -71,16 +71,13 @@ const PhotosPage = () => {
     autoProceed: true,
   });
 
-  const [addArchiveItem, { loading, error, data }] = useMutation(
-    ADD_ARCHIVE_ITEM,
-    {
-      onCompleted: () => {
-        setUploadCompleted(true);
-        console.log(`Successful upload: ${data.id}`);
-      },
-      onError: () => setUploadError(error),
-    }
-  );
+  const [addArchiveItem, { loading }] = useMutation(ADD_ARCHIVE_ITEM, {
+    onCompleted: (data) => {
+      setUploadCompleted(true);
+      console.log(`Successful upload: ${data.setArchiveItem.id}`);
+    },
+    onError: (error) => setUploadError(error),
+  });
 
   const resetState = async () => {
     await uppy.reset();