EVG-16587 Bump Apollo and graphql deps

package.json

@@ -59,7 +59,7 @@
     "extends": "react-app"
   },
   "dependencies": {
-    "@apollo/client": "3.3.7",
+    "@apollo/client": "3.6.9",
     "@bugsnag/js": "7.16.0",
     "@bugsnag/plugin-react": "7.16.0",
     "@emotion/css": "^11.9.0",
@@ -104,7 +104,7 @@
     "date-fns-tz": "^1.1.2",
     "deep-object-diff": "1.1.0",
     "env-cmd": "10.1.0",
-    "graphql": "15.5.0",
+    "graphql": "16.5.0",
     "html-react-parser": "1.2.4",
     "js-cookie": "2.2.1",
     "linkifyjs": "2.1.9",
@@ -151,7 +151,6 @@
     "@testing-library/react": "12.1.5",
     "@testing-library/react-hooks": "8.0.0",
     "@testing-library/user-event": "12.5.0",
-    "@types/graphql": "^14.5.0",
     "@types/jest": "^27.5.1",
     "@types/js-cookie": "^2.2.7",
     "@types/lodash.debounce": "4.0.6",
@@ -189,7 +188,6 @@
     "eslint-plugin-storybook": "0.5.6",
     "eslint-plugin-testing-library": "^3.9.2",
     "eslint-webpack-plugin": "^2.1.0",
-    "graphql-tag": "^2.11.0",
     "http-proxy": "^1.18.1",
     "husky": "4.3.0",
     "identity-obj-proxy": "3.0.0",

src/components/Table/TasksTable.tsx

@@ -46,6 +46,7 @@ interface TasksTableProps {
   tasks: TaskTableInfo[];
   taskNameInputProps?: InputFilterProps;
   variantInputProps?: InputFilterProps;
+  loading?: boolean;
 }
 
 export const TasksTable: React.VFC<TasksTableProps> = ({
@@ -59,11 +60,13 @@ export const TasksTable: React.VFC<TasksTableProps> = ({
   tableChangeHandler,
   tasks,
   variantInputProps,
+  loading = false,
 }) => (
   <Table
     data-cy="tasks-table"
     rowKey={rowKey}
     pagination={false}
+    loading={loading}
     columns={
       sorts
         ? getColumnDefsWithSort({

src/pages/Version.tsx

@@ -46,6 +46,21 @@ export const VersionPage: React.VFC = () => {
   const [redirectURL, setRedirectURL] = useState(undefined);
   const [isLoadingData, setIsLoadingData] = useState(true);
 
+  const [
+    getVersion,
+    { data, error: versionError, refetch, startPolling, stopPolling },
+  ] = useLazyQuery<VersionQuery, VersionQueryVariables>(GET_VERSION, {
+    variables: { id },
+    pollInterval,
+    fetchPolicy: "cache-and-network",
+    onError: (e) => {
+      dispatchToast.error(
+        `There was an error loading the version: ${e.message}`
+      );
+      setIsLoadingData(false);
+    },
+  });
+
   const { error: hasVersionError } = useQuery<
     GetHasVersionQuery,
     GetHasVersionQueryVariables
@@ -87,21 +102,6 @@ export const VersionPage: React.VFC = () => {
     },
   });
 
-  const [
-    getVersion,
-    { data, error: versionError, refetch, startPolling, stopPolling },
-  ] = useLazyQuery<VersionQuery, VersionQueryVariables>(GET_VERSION, {
-    variables: { id },
-    pollInterval,
-    fetchPolicy: "network-only",
-    nextFetchPolicy: "cache-and-network",
-    onError: (e) => {
-      dispatchToast.error(
-        `There was an error loading the version: ${e.message}`
-      );
-      setIsLoadingData(false);
-    },
-  });
   usePolling(startPolling, stopPolling, refetch, false);
 
   // Decide where to redirect the user based off of whether or not the patch has been activated
@@ -117,6 +117,8 @@ export const VersionPage: React.VFC = () => {
         setRedirectURL(getCommitQueueRoute(projectID));
         setIsLoadingData(false);
       } else {
+        console.log("Calling getVersion");
+        console.log({ getVersion });
         getVersion({ variables: { id } });
       }
     }

src/pages/projectSettings/tabs/GeneralTab/Fields/RepoConfigField.test.tsx

@@ -310,7 +310,9 @@ const attachProjectToRepoMock = {
   },
   result: {
     data: {
-      id: "evergreen",
+      attachProjectToRepo: {
+        id: "evergreen",
+      },
     },
   },
 };
@@ -322,7 +324,9 @@ const detachProjectFromRepoMock = {
   },
   result: {
     data: {
-      id: "evergreen",
+      detachProjectFromRepo: {
+        id: "evergreen",
+      },
     },
   },
 };

src/pages/spawn/spawnVolume/spawnVolumeButton/SpawnVolumeModal.test.tsx

@@ -113,10 +113,7 @@ describe("spawnVolumeModal", () => {
       <SpawnVolumeModal visible onCancel={() => {}} />
     );
     const { queryByText, queryByDataCy } = render(
-      <MockedProvider
-        addTypename={false}
-        mocks={[...baseMocks, spawnVolumeMutation]}
-      >
+      <MockedProvider mocks={[...baseMocks, spawnVolumeMutation]}>
         <Component />
       </MockedProvider>
     );
@@ -130,7 +127,6 @@ describe("spawnVolumeModal", () => {
     fireEvent.click(queryByDataCy("i-00b212e96b3f91079-option"));
     fireEvent.click(queryByText("Spawn"));
     await waitFor(() => expect(dispatchToast.success).toHaveBeenCalledTimes(1));
-    await waitFor(() => expect(dispatchToast.error).toHaveBeenCalledTimes(0));
   });
 });
 
@@ -292,6 +288,7 @@ const userMock = {
       user: {
         userId: "a",
         displayName: "A",
+        emailAddress: "[email protected]",
       },
     },
   },

src/pages/version/Tasks.tsx

@@ -1,6 +1,5 @@
 import { useEffect } from "react";
 import { useQuery } from "@apollo/client";
-import { Skeleton } from "antd";
 import { useParams, useLocation } from "react-router-dom";
 import { pollInterval } from "constants/index";
 import { useToastContext } from "context/toast";
@@ -28,7 +27,7 @@ export const Tasks: React.VFC<Props> = ({ taskCount }) => {
   const updateQueryParams = useUpdateURLQueryParams();
 
   const queryVariables = useQueryVariables(search, id);
-  const noQueryVariables = !Object.keys(parseQueryString(search)).length;
+  const hasQueryVariables = Object.keys(parseQueryString(search)).length > 0;
   const { sorts, limit, page } = queryVariables;
 
   useEffect(() => {
@@ -50,23 +49,21 @@ export const Tasks: React.VFC<Props> = ({ taskCount }) => {
     });
   };
 
-  const { data, refetch, startPolling, stopPolling } = useQuery<
+  const { data, loading, refetch, startPolling, stopPolling } = useQuery<
     PatchTasksQuery,
     PatchTasksQueryVariables
   >(GET_PATCH_TASKS, {
     variables: queryVariables,
-    skip: noQueryVariables,
     pollInterval,
-    fetchPolicy: "network-only",
-    nextFetchPolicy: "cache-and-network",
+    skip: !hasQueryVariables,
+    fetchPolicy: "cache-and-network",
     onError: (err) => {
       dispatchToast.error(`Error fetching patch tasks ${err}`);
     },
   });
   usePolling(startPolling, stopPolling, refetch);
   const { patchTasks } = data || {};
-  const { tasks } = patchTasks || {};
-
+  const { tasks } = patchTasks || { tasks: [] };
   return (
     <>
       <TableControl
@@ -76,11 +73,11 @@ export const Tasks: React.VFC<Props> = ({ taskCount }) => {
         page={page}
         onClear={clearQueryParams}
       />
-      {!data ? (
-        <Skeleton active title={false} paragraph={{ rows: 8 }} />
-      ) : (
-        <PatchTasksTable sorts={sorts} tasks={tasks} />
-      )}
+      <PatchTasksTable
+        sorts={sorts}
+        tasks={tasks}
+        loading={tasks.length === 0 && loading}
+      />
     </>
   );
 };

src/pages/version/tasks/PatchTasksTable.tsx

@@ -17,9 +17,14 @@ const { toSortString } = queryString;
 interface Props {
   tasks: PatchTasksQuery["patchTasks"]["tasks"];
   sorts: SortOrder[];
+  loading: boolean;
 }
 
-export const PatchTasksTable: React.VFC<Props> = ({ tasks, sorts }) => {
+export const PatchTasksTable: React.VFC<Props> = ({
+  tasks = [],
+  sorts,
+  loading,
+}) => {
   const { id: versionId } = useParams<{ id: string }>();
   const updateQueryParams = useUpdateURLQueryParams();
   const { sendEvent } = useVersionAnalytics(versionId);
@@ -84,6 +89,7 @@ export const PatchTasksTable: React.VFC<Props> = ({ tasks, sorts }) => {
       sorts={sorts}
       tableChangeHandler={tableChangeHandler}
       tasks={tasks}
+      loading={loading}
       onExpand={(expanded) => {
         sendEvent({
           name: "Toggle Display Task Dropdown",