feature/IO-3497-Ant-Design-v5-to-v6 - Checkpoint (Apollo)

client/src/App/App.container.jsx

@@ -1,4 +1,4 @@
-import { ApolloProvider } from "@apollo/client";
+import { ApolloProvider } from "@apollo/client/react";
 import * as Sentry from "@sentry/react";
 import { SplitFactoryProvider, useSplitClient } from "@splitsoftware/splitio-react";
 import { ConfigProvider } from "antd";

client/src/components/allocations-assignment/allocations-assignment.container.jsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import AllocationsAssignmentComponent from "./allocations-assignment.component";
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { INSERT_ALLOCATION } from "../../graphql/allocations.queries";
 import { useTranslation } from "react-i18next";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

client/src/components/allocations-bulk-assignment/allocations-bulk-assignment.container.jsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import AllocationsBulkAssignment from "./allocations-bulk-assignment.component";
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { INSERT_ALLOCATION } from "../../graphql/allocations.queries";
 import { useTranslation } from "react-i18next";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

client/src/components/allocations-employee-label/allocations-employee-label.container.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { DELETE_ALLOCATION } from "../../graphql/allocations.queries";
 import AllocationsLabelComponent from "./allocations-employee-label.component";
 import { useTranslation } from "react-i18next";

client/src/components/audit-trail-list/audit-trail-list.container.jsx

@@ -1,5 +1,5 @@
 import AuditTrailListComponent from "./audit-trail-list.component";
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { QUERY_AUDIT_TRAIL } from "../../graphql/audit_trail.queries";
 import AlertComponent from "../alert/alert.component";
 import { logImEXEvent } from "../../firebase/firebase.utils";

client/src/components/bill-delete-button/bill-delete-button.component.jsx

@@ -1,5 +1,5 @@
 import { DeleteFilled } from "@ant-design/icons";
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Button, Popconfirm } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/bill-detail-edit/bill-detail-edit-component.jsx

@@ -1,5 +1,5 @@
 import { PageHeader } from "@ant-design/pro-layout";
-import { useMutation, useQuery } from "@apollo/client";
+import { useMutation, useQuery } from "@apollo/client/react";
 import { Button, Divider, Form, Popconfirm, Space } from "antd";
 import queryString from "query-string";
 import { useState } from "react";

client/src/components/bill-enter-modal/bill-enter-modal.container.jsx

@@ -1,4 +1,4 @@
-import { useApolloClient, useMutation } from "@apollo/client";
+import { useApolloClient, useMutation } from "@apollo/client/react";
 import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 import { Button, Checkbox, Form, Modal, Space } from "antd";
 import _ from "lodash";

client/src/components/bill-form/bill-form.component.jsx

@@ -1,5 +1,5 @@
 import Icon, { UploadOutlined } from "@ant-design/icons";
-import { useApolloClient } from "@apollo/client";
+import { useApolloClient } from "@apollo/client/react";
 import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 import { Alert, Divider, Form, Input, Select, Space, Statistic, Switch, Upload } from "antd";
 import { useEffect, useState } from "react";
@@ -98,13 +98,11 @@ export function BillFormComponent({
     }
     const jobId = form.getFieldValue("jobid");
     if (jobId) {
-      loadLines({ variables: { id: jobId } });
+      loadLines({ id: jobId });
       if (form.getFieldValue("is_credit_memo") && vendorId && !billEdit) {
         loadOutstandingReturns({
-          variables: {
-            jobId: jobId,
-            vendorId: vendorId
-          }
+          jobId: jobId,
+          vendorId: vendorId
         });
       }
     }
@@ -146,13 +144,11 @@ export function BillFormComponent({
             notExported={false}
             onBlur={() => {
               if (form.getFieldValue("jobid") !== null && form.getFieldValue("jobid") !== undefined) {
-                loadLines({ variables: { id: form.getFieldValue("jobid") } });
+                loadLines({ id: form.getFieldValue("jobid") });
                 if (form.getFieldValue("vendorid") !== null && form.getFieldValue("vendorid") !== undefined) {
                   loadOutstandingReturns({
-                    variables: {
-                      jobId: form.getFieldValue("jobid"),
-                      vendorId: form.getFieldValue("vendorid")
-                    }
+                    jobId: form.getFieldValue("jobid"),
+                    vendorId: form.getFieldValue("vendorid")
                   });
                 }
               }

client/src/components/bill-form/bill-form.container.jsx

@@ -1,4 +1,4 @@
-import { useLazyQuery, useQuery } from "@apollo/client";
+import { useLazyQuery, useQuery } from "@apollo/client/react";
 import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";

client/src/components/bill-mark-exported-button/bill-mark-exported-button.component.jsx

@@ -1,4 +1,6 @@
-import { gql, useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
+import { gql } from "@apollo/client";
+
 import { Button } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/bill-reexport-button/bill-reexport-button.component.jsx

@@ -1,4 +1,5 @@
-import { gql, useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
+import { gql } from "@apollo/client";
 import { Button } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/billline-add-inventory/billline-add-inventory.component.jsx

@@ -1,5 +1,5 @@
 import { FileAddFilled } from "@ant-design/icons";
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Button, Tooltip } from "antd";
 import { t } from "i18next";
 import dayjs from "./../../utils/day";

client/src/components/bills-vendors-list/bills-vendors-list.component.jsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries";
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import queryString from "query-string";
 import { useLocation, useNavigate } from "react-router-dom";
 import { Input, Table } from "antd";

client/src/components/card-payment-modal/card-payment-modal.component.jsx

@@ -1,5 +1,5 @@
 import { CopyFilled, DeleteFilled } from "@ant-design/icons";
-import { useLazyQuery, useMutation } from "@apollo/client";
+import { useLazyQuery, useMutation } from "@apollo/client/react";
 import { Button, Card, Col, Form, Input, message, Row, Space, Spin, Statistic } from "antd";
 import axios from "axios";
 import { useState } from "react";
@@ -52,7 +52,6 @@ const CardPaymentModalComponent = ({
   const notification = useNotification();
 
   const [, { data, refetch, queryLoading }] = useLazyQuery(QUERY_RO_AND_OWNER_BY_JOB_PKS, {
-    variables: { jobids: [context.jobid] },
     skip: !context?.jobid
   });
 
@@ -258,7 +257,7 @@ const CardPaymentModalComponent = ({
               //If all of the job ids have been fileld in, then query and update the IP field.
               const { payments } = form.getFieldsValue();
               if (payments?.length > 0 && payments?.filter((p) => p?.jobid).length === payments?.length) {
-                refetch({ jobids: payments.map((p) => p.jobid) });
+                refetch({ variables: { jobids: payments.map((p) => p.jobid) } });
               }
               return (
                 <>

client/src/components/chat-affix/chat-affix.container.jsx

@@ -1,4 +1,4 @@
-import { useApolloClient } from "@apollo/client";
+import { useApolloClient } from "@apollo/client/react";
 import { getToken } from "@firebase/messaging";
 import axios from "axios";
 import { useEffect } from "react";

client/src/components/chat-archive-button/chat-archive-button.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Button } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/chat-conversation-list/chat-conversation-list.component.jsx

@@ -11,7 +11,7 @@ import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-displ
 import _ from "lodash";
 import { ExclamationCircleOutlined } from "@ant-design/icons";
 import "./chat-conversation-list.styles.scss";
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { GET_PHONE_NUMBER_OPT_OUTS_BY_NUMBERS } from "../../graphql/phone-number-opt-out.queries.js";
 import { phone } from "phone";
 import { useTranslation } from "react-i18next";

client/src/components/chat-conversation-title-tags/chat-conversation-title-tags.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Tag } from "antd";
 import { Link } from "react-router-dom";
 import { logImEXEvent } from "../../firebase/firebase.utils";

client/src/components/chat-conversation/chat-conversation.container.jsx

@@ -1,4 +1,5 @@
-import { gql, useApolloClient, useQuery, useSubscription } from "@apollo/client";
+import { useApolloClient, useQuery, useSubscription } from "@apollo/client/react";
+import { gql } from "@apollo/client";
 import axios from "axios";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { connect } from "react-redux";

client/src/components/chat-label/chat-label.component.jsx

@@ -1,5 +1,5 @@
 import { PlusOutlined } from "@ant-design/icons";
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Input, Spin, Tag, Tooltip } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/chat-media-selector/chat-media-selector.component.jsx

@@ -1,5 +1,5 @@
 import { PictureFilled } from "@ant-design/icons";
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 import { Badge, Popover } from "antd";
 import { useEffect, useState } from "react";

client/src/components/chat-popup/chat-popup.component.jsx

@@ -1,5 +1,5 @@
 import { InfoCircleOutlined, MessageOutlined, ShrinkOutlined, SyncOutlined } from "@ant-design/icons";
-import { useApolloClient, useLazyQuery, useQuery } from "@apollo/client";
+import { useApolloClient, useLazyQuery, useQuery } from "@apollo/client/react";
 import { Badge, Card, Col, Row, Space, Tag, Tooltip, Typography } from "antd";
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -105,9 +105,7 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
 
     hasLoadedConversationsOnceRef.current = true;
 
-    getConversations({
-      variables: { offset: 0 }
-    }).catch((err) => {
+    getConversations({ offset: 0 }).catch((err) => {
       console.error(`Error fetching conversations: ${err?.message || ""}`, err);
     });
   }, [getConversations]);
@@ -115,9 +113,9 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
   const handleManualRefresh = async () => {
     try {
       if (called && typeof refetch === "function") {
-        await refetch({ offset: 0 });
+        await refetch({ variables: { offset: 0 } });
       } else {
-        await getConversations({ variables: { offset: 0 } });
+        await getConversations({ offset: 0 });
       }
     } catch (err) {
       console.error(`Error refreshing conversations: ${err?.message || ""}`, err);

client/src/components/chat-send-message/chat-send-message.component.jsx

@@ -10,7 +10,7 @@ import { selectIsSending, selectMessage } from "../../redux/messaging/messaging.
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import ChatMediaSelector from "../chat-media-selector/chat-media-selector.component";
 import ChatPresetsComponent from "../chat-presets/chat-presets.component";
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { phone } from "phone";
 import { GET_PHONE_NUMBER_OPT_OUT } from "../../graphql/phone-number-opt-out.queries";
 

client/src/components/chat-tag-ro/chat-tag-ro.container.jsx

@@ -1,5 +1,5 @@
 import { PlusOutlined } from "@ant-design/icons";
-import { useLazyQuery, useMutation } from "@apollo/client";
+import { useLazyQuery, useMutation } from "@apollo/client/react";
 import { Tag } from "antd";
 import _ from "lodash";
 import { useState } from "react";
@@ -34,7 +34,7 @@ export function ChatTagRoContainer({ conversation, bodyshop }) {
   const debouncedExecuteSearch = _.debounce(executeSearch, 500);
 
   const handleSearch = (value) => {
-    debouncedExecuteSearch({ variables: { search: value } });
+    debouncedExecuteSearch({ search: value });
   };
 
   const [insertTag] = useMutation(INSERT_CONVERSATION_TAG, {

client/src/components/contract-cars/contract-cars.container.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import dayjs from "../../utils/day";
 import { QUERY_AVAILABLE_CC } from "../../graphql/courtesy-car.queries";
 import AlertComponent from "../alert/alert.component";

client/src/components/contract-convert-to-ro/contract-convert-to-ro.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Button, Form, InputNumber, Popover, Radio, Select, Space } from "antd";
 import axios from "axios";
 import dayjs from "../../utils/day";

client/src/components/contract-form/contract-form-job-prefill.component.jsx

@@ -1,4 +1,4 @@
-import { useLazyQuery } from "@apollo/client";
+import { useLazyQuery } from "@apollo/client/react";
 import { Button } from "antd";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
@@ -11,7 +11,7 @@ export default function ContractCreateJobPrefillComponent({ jobId, form }) {
   const notification = useNotification();
 
   const handleClick = () => {
-    call({ variables: { id: jobId } });
+    call({ id: jobId });
   };
 
   useEffect(() => {

client/src/components/contract-jobs/contract-jobs.container.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";

client/src/components/contracts-find-modal/contracts-find-modal.container.jsx

@@ -1,4 +1,4 @@
-import { useLazyQuery } from "@apollo/client";
+import { useLazyQuery } from "@apollo/client/react";
 import { Button, Form, Modal, Table } from "antd";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
@@ -35,10 +35,8 @@ export function ContractsFindModalContainer({ contractFinderModal, toggleModalVi
 
     //Execute contract find
     callSearch({
-      variables: {
-        plate: (values.plate && values.plate !== "" && values.plate) || undefined,
-        time: values.time
-      }
+      plate: (values.plate && values.plate !== "" && values.plate) || undefined,
+      time: values.time
     });
   };
 

client/src/components/courtesy-car-form/courtesy-car-form.component.jsx

@@ -1,5 +1,5 @@
 import { WarningFilled } from "@ant-design/icons";
-import { useApolloClient } from "@apollo/client";
+import { useApolloClient } from "@apollo/client/react";
 import { Button, Form, Input, InputNumber, Space } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
 import dayjs from "../../utils/day";

client/src/components/courtesy-car-return-modal/courtesy-car-return-modal.container.jsx

@@ -8,7 +8,7 @@ import { selectCourtesyCarReturn } from "../../redux/modals/modals.selectors";
 import CourtesyCarReturnModalComponent from "./courtesy-car-return-modal.component";
 import dayjs from "../../utils/day";
 import { RETURN_CONTRACT } from "../../graphql/cccontracts.queries";
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({

client/src/components/csi-response-form/csi-response-form.container.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { Card, Form, Result } from "antd";
 import queryString from "query-string";
 import { useEffect } from "react";

client/src/components/dashboard-grid/dashboard-grid.component.jsx

@@ -1,5 +1,5 @@
 import Icon, { SyncOutlined } from "@ant-design/icons";
-import { useMutation, useQuery } from "@apollo/client";
+import { useMutation, useQuery } from "@apollo/client/react";
 import { Button, Dropdown, Space } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
 import { useEffect, useMemo, useState } from "react";

client/src/components/dms-cdk-makes/dms-cdk-makes.component.jsx

@@ -1,4 +1,4 @@
-import { useLazyQuery } from "@apollo/client";
+import { useLazyQuery } from "@apollo/client/react";
 import { Button, Input, Modal, Table } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -60,7 +60,7 @@ export function DmsCdkVehicles({ form, job }) {
         <Table
           title={() => (
             <Input.Search
-              onSearch={(val) => callSearch({ variables: { search: val } })}
+              onSearch={(val) => callSearch({ search: val })}
               placeholder={t("general.labels.search")}
             />
           )}
@@ -87,9 +87,7 @@ export function DmsCdkVehicles({ form, job }) {
         onClick={() => {
           setOpen(true);
           callSearch({
-            variables: {
-              search: job?.v_model_desc && job.v_model_desc.substr(0, 3)
-            }
+            search: job?.v_model_desc && job.v_model_desc.substr(0, 3)
           });
         }}
       >

client/src/components/document-editor/document-editor.container.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { Result } from "antd";
 import queryString from "query-string";
 import { useEffect } from "react";

client/src/components/email-documents/email-documents.component.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";

client/src/components/employee-team-search-select/employee-team-search-select.component.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { Select } from "antd";
 import { forwardRef } from "react";
 import { QUERY_TEAMS } from "../../graphql/employee_teams.queries";

client/src/components/eula/eula.component.jsx

@@ -5,7 +5,7 @@ import { createStructuredSelector } from "reselect";
 import { selectCurrentEula, selectCurrentUser } from "../../redux/user/user.selectors";
 import { connect } from "react-redux";
 import { INSERT_EULA_ACCEPTANCE } from "../../graphql/user.queries";
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { acceptEula } from "../../redux/user/user.actions";
 import { useTranslation } from "react-i18next";
 import dayjs from "../../utils/day";

client/src/components/global-search/global-search.component.jsx

@@ -1,4 +1,4 @@
-import { useLazyQuery } from "@apollo/client";
+import { useLazyQuery } from "@apollo/client/react";
 import { AutoComplete, Divider, Input, Space } from "antd";
 import _ from "lodash";
 import { useTranslation } from "react-i18next";
@@ -20,7 +20,7 @@ export default function GlobalSearch() {
   const debouncedExecuteSearch = _.debounce(executeSearch, 750);
 
   const handleSearch = (value) => {
-    debouncedExecuteSearch({ variables: { search: value } });
+    debouncedExecuteSearch({ search: value });
   };
 
   const renderTitle = (title) => {

client/src/components/header/header.component.jsx

@@ -1,7 +1,7 @@
 // noinspection RegExpAnonymousGroup
 
 import { BellFilled } from "@ant-design/icons";
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 import { Badge, Layout, Menu, Spin, Tooltip } from "antd";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";

client/src/components/inventory-line-delete/inventory-line-delete.component.jsx

@@ -1,5 +1,5 @@
 import { DeleteFilled } from "@ant-design/icons";
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Button, Popconfirm } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/inventory-list/inventory-list.container.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import queryString from "query-string";
 import { connect } from "react-redux";
 import { useLocation } from "react-router-dom";

client/src/components/inventory-upsert-modal/inventory-upsert-modal.container.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Form, Modal } from "antd";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/job-3rd-party-modal/job-3rd-party-modal.component.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { Button, Form, Input, InputNumber, Modal, Radio, Select } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/job-at-change/job-at-change.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";

client/src/components/job-at-change/schedule-event.color.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";

client/src/components/job-at-change/schedule-event.component.jsx

@@ -1,5 +1,5 @@
 import { AlertFilled } from "@ant-design/icons";
-import { useLazyQuery, useMutation } from "@apollo/client";
+import { useLazyQuery, useMutation } from "@apollo/client/react";
 import { Button, Divider, Dropdown, Form, Input, Popover, Select, Space } from "antd";
 import parsePhoneNumber from "libphonenumber-js";
 import queryString from "query-string";
@@ -66,7 +66,6 @@ export function ScheduleEventComponent({
   const [form] = Form.useForm();
   const [popOverVisible, setPopOverVisible] = useState(false);
   const [getJobDetails] = useLazyQuery(GET_JOB_BY_PK_QUICK_INTAKE, {
-    variables: { id: event.job?.id },
     onCompleted: (data) => {
       if (data?.jobs_by_pk) {
         const totalHours =
@@ -412,7 +411,7 @@ export function ScheduleEventComponent({
               onClick={(e) => {
                 if (event.job?.id) {
                   e.stopPropagation();
-                  getJobDetails();
+                  getJobDetails({ id: event.job.id });
                 }
               }}
               getPopupContainer={(trigger) => trigger.parentNode}

client/src/components/job-at-change/schedule-event.container.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
 import { logImEXEvent } from "../../firebase/firebase.utils";

client/src/components/job-at-change/schedule-event.note.component.jsx

@@ -1,5 +1,5 @@
 import { EditFilled, SaveFilled } from "@ant-design/icons";
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Button, Input, Space } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/job-audit-trail/job-audit-trail.component.jsx

@@ -1,5 +1,5 @@
 import { SyncOutlined } from "@ant-design/icons";
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { Button, Card, Col, Row, Table, Tag } from "antd";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";

client/src/components/job-checklist/components/job-checklist-form/job-checklist-form.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Button, Card, Form, Input, Switch } from "antd";
 import queryString from "query-string";
 import { useState } from "react";

client/src/components/job-close-ro-guard/job-close-ro-gaurd.labor.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";

client/src/components/job-close-ro-guard/job-close-ro-guard.bills.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { QUERY_PARTS_BILLS_BY_JOBID } from "../../graphql/bills.queries";

client/src/components/job-create-iou/job-create-iou.component.jsx

@@ -1,4 +1,4 @@
-import { useApolloClient } from "@apollo/client";
+import { useApolloClient } from "@apollo/client/react";
 import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 import { Button, Popconfirm } from "antd";
 import { useState } from "react";

client/src/components/job-detail-cards/job-detail-cards.component.jsx

@@ -1,5 +1,5 @@
 import { PauseCircleOutlined, PlayCircleOutlined, PrinterFilled } from "@ant-design/icons";
-import { useMutation, useQuery } from "@apollo/client";
+import { useMutation, useQuery } from "@apollo/client/react";
 import { Button, Card, Col, Divider, Drawer, Grid, Row, Space } from "antd";
 import queryString from "query-string";
 import { useTranslation } from "react-i18next";

client/src/components/job-detail-lines/job-lines-expander.component.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { Col, Row, Skeleton, Space, Timeline, Typography } from "antd";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";

client/src/components/job-detail-lines/job-lines-part-price-change.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Button, Form, Popover, Tooltip } from "antd";
 import axios from "axios";
 import { t } from "i18next";

client/src/components/job-detail-lines/job-lines.component.jsx

@@ -9,7 +9,8 @@ import {
   WarningFilled
 } from "@ant-design/icons";
 import { PageHeader } from "@ant-design/pro-layout";
-import { gql, useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
+import { gql } from "@apollo/client";
 import { Button, Dropdown, Input, Modal, Select, Space, Table, Tag, Typography } from "antd";
 import axios from "axios";
 import { useMemo, useState } from "react";

client/src/components/job-detail-lines/jobs-lines-expander-simple.component.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { Col, Row, Skeleton, Timeline, Typography } from "antd";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";

client/src/components/job-employee-assignments/job-employee-assignments.container.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";

client/src/components/job-lifecycle/job-lifecycle.component.jsx

@@ -1,4 +1,5 @@
-import { gql, useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
+import { gql } from "@apollo/client";
 import { Badge, Card, Space, Table, Tag } from "antd";
 import axios from "axios";
 import { isEmpty } from "lodash";

client/src/components/job-line-bulk-assign/job-line-bulk-assign.component.jsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Button, Form, Popover, Select, Space } from "antd";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";

client/src/components/job-line-convert-to-labor/job-line-convert-to-labor.component.jsx

@@ -1,5 +1,5 @@
 import { ClockCircleOutlined } from "@ant-design/icons";
-import { useApolloClient } from "@apollo/client";
+import { useApolloClient } from "@apollo/client/react";
 import { Button, Card, Form, Popover, Select, Space, Tooltip } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/job-line-dispatch-button/job-line-dispatch-button.component.jsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Button, Form, Popover, Select, Space } from "antd";
 import dayjs from "../../utils/day";
 import { useTranslation } from "react-i18next";

client/src/components/job-line-location-popup/job-line-location-popup.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Select, Space, Tag } from "antd";
 import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/job-line-note-popup/job-line-note-popup.component.jsx

@@ -1,5 +1,5 @@
 import { FieldTimeOutlined } from "@ant-design/icons";
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Input } from "antd";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/job-line-status-popup/job-line-status-popup.component.jsx

@@ -1,6 +1,6 @@
 import { Select } from "antd";
 import { useEffect, useState } from "react";
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";

client/src/components/job-line-team-assignment/job-line-team-assignmnent.component.jsx

@@ -1,6 +1,6 @@
 import { Select } from "antd";
 import { useEffect, useState } from "react";
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";

client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.container.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 import Axios from "axios";
 import Dinero from "dinero.js";

client/src/components/job-notes-pin-toggle/job-notes-pin-toggle.component.jsx

@@ -1,5 +1,5 @@
 import { PushpinFilled, PushpinOutlined } from "@ant-design/icons";
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { UPDATE_NOTE } from "../../graphql/notes.queries";
 
 function JobNotesPinToggle({ note }) {

client/src/components/job-reconciliation-modal/job-reconciliation.modal.container.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { Modal } from "antd";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";

client/src/components/job-remove-from-parst-queue/job-remove-from-parts-queue.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Checkbox, Space, Spin } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/job-scoreboard-add-button/job-scoreboard-add-button.component.jsx

@@ -1,5 +1,5 @@
 import { CheckCircleOutlined } from "@ant-design/icons";
-import { useLazyQuery, useMutation } from "@apollo/client";
+import { useLazyQuery, useMutation } from "@apollo/client/react";
 import { Button, Card, Form, InputNumber, Popover, Space } from "antd";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -38,7 +38,7 @@ export function ScoreboardAddButton({ bodyshop, job, disabled, ...otherBtnProps
 
   useEffect(() => {
     if (visibility) {
-      callQuery({ variables: { jobid: job.id } });
+      callQuery({ jobid: job.id });
     }
   }, [visibility, job.id, callQuery]);
 

client/src/components/job-search-select/job-search-select.component.jsx

@@ -1,5 +1,5 @@
 import { LoadingOutlined } from "@ant-design/icons";
-import { useLazyQuery } from "@apollo/client";
+import { useLazyQuery } from "@apollo/client/react";
 import { Select, Space, Spin, Tag } from "antd";
 import _ from "lodash";
 import { forwardRef, useEffect, useState } from "react";
@@ -29,22 +29,20 @@ const JobSearchSelect = (
 
   const handleSearch = (value) => {
     debouncedExecuteSearch({
-      variables: {
-        search: value,
-        ...(convertedOnly || notExported
-          ? {
-              ...(convertedOnly ? { isConverted: true } : {}),
-              ...(notExported ? { notExported: true } : {}),
-              ...(notInvoiced ? { notInvoiced: true } : {})
-            }
-          : {})
-      }
+      search: value,
+      ...(convertedOnly || notExported
+        ? {
+            ...(convertedOnly ? { isConverted: true } : {}),
+            ...(notExported ? { notExported: true } : {}),
+            ...(notInvoiced ? { notInvoiced: true } : {})
+          }
+        : {})
     });
   };
 
   useEffect(() => {
     if (restProps.value) {
-      callIdSearch({ variables: { id: restProps.value } }); // Sometimes results in a no-op. Not sure how to fix.
+      callIdSearch({ id: restProps.value }); // Sometimes results in a no-op. Not sure how to fix.
     }
   }, [restProps.value, callIdSearch]);
 

client/src/components/job-watcher-toggle/job-watcher-toggle.container.jsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { useMutation, useQuery } from "@apollo/client";
+import { useMutation, useQuery } from "@apollo/client/react";
 import { ADD_JOB_WATCHER, GET_JOB_WATCHERS, REMOVE_JOB_WATCHER } from "../../graphql/jobs.queries.js";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";

client/src/components/jobs-admin-change-status/jobs-admin-change.status.component.jsx

@@ -1,5 +1,5 @@
 import { DownCircleFilled } from "@ant-design/icons";
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Button, Dropdown } from "antd";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";

client/src/components/jobs-admin-class/jobs-admin-class.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Button, Form, Popconfirm, Select } from "antd";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/jobs-admin-dates/jobs-admin-dates.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Button, Form } from "antd";
 import dayjs from "../../utils/day";
 import { useEffect, useState } from "react";

client/src/components/jobs-admin-delete-intake/jobs-admin-delete-intake.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Button, Space } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/jobs-admin-mark-reexport/jobs-admin-mark-reexport.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Button, Space } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/jobs-admin-owner-reassociate/jobs-admin-owner-reassociate.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Button, Form } from "antd";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/jobs-admin-remove-ar/jobs-admin-remove-ar.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Switch } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/jobs-admin-unvoid/jobs-admin-unvoid.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Button } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/jobs-admin-vehicle-reassociate/jobs-admin-vehicle-reassociate.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Button, Form } from "antd";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/jobs-available-table/jobs-available-table.component.jsx

@@ -1,5 +1,5 @@
 import { DeleteFilled, DownloadOutlined, PlusCircleFilled, SyncOutlined } from "@ant-design/icons";
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Alert, Button, Card, Input, Space, Table } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/jobs-available-table/jobs-available-table.container.jsx

@@ -1,4 +1,5 @@
-import { gql, useApolloClient, useLazyQuery, useMutation, useQuery } from "@apollo/client";
+import { useApolloClient, useLazyQuery, useMutation, useQuery } from "@apollo/client/react";
+import { gql } from "@apollo/client";
 import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 import { Col, Row } from "antd";
 import Axios from "axios";
@@ -368,12 +369,12 @@ export function JobsAvailableContainer({ bodyshop, currentUser, insertAuditTrail
   };
 
   const addJobAsNew = (record) => {
-    loadEstData({ variables: { id: record.id } });
+    loadEstData({ id: record.id });
     setOwnerModalVisible(true);
   };
 
   const addJobAsSupp = useCallback((record) => {
-    loadEstData({ variables: { id: record.id } });
+    loadEstData({ id: record.id });
     modalSearchState[1](record.clm_no);
     setJobModalVisible(true);
   }, []);

client/src/components/jobs-change-status/jobs-change-status.component.jsx

@@ -1,5 +1,5 @@
 import { DownCircleFilled } from "@ant-design/icons";
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Button, Dropdown } from "antd";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/jobs-close-export-button/jobs-close-export-button.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Button } from "antd";
 import axios from "axios";
 import { useState } from "react";

client/src/components/jobs-convert-button/jobs-convert-button.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Button, Form, Input, Popover, Select, Space, Switch } from "antd";
 import axios from "axios";
 import { some } from "lodash";

client/src/components/jobs-create-owner-info/jobs-create-owner-info.container.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { useContext } from "react";
 import { QUERY_SEARCH_OWNER_BY_IDX } from "../../graphql/owners.queries";
 import JobCreateContext from "../../pages/jobs-create/jobs-create.context";

client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.container.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { useContext } from "react";
 import { SEARCH_VEHICLES } from "../../graphql/vehicles.queries";
 import JobCreateContext from "../../pages/jobs-create/jobs-create.context";

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx

@@ -1,5 +1,5 @@
 import { DownCircleFilled } from "@ant-design/icons";
-import { useApolloClient, useMutation } from "@apollo/client";
+import { useApolloClient, useMutation } from "@apollo/client/react";
 import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 import { Button, Card, Dropdown, Form, Input, Modal, Popconfirm, Popover, Select, Space } from "antd";
 import axios from "axios";

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.toggle-production.jsx

@@ -1,4 +1,4 @@
-import { useLazyQuery, useMutation } from "@apollo/client";
+import { useLazyQuery, useMutation } from "@apollo/client/react";
 import { Button, Form, Popover, Space } from "antd";
 import dayjs from "dayjs";
 import { useEffect, useState } from "react";
@@ -42,7 +42,6 @@ export function JobsDetailHeaderActionsToggleProduction({
   const notification = useNotification();
 
   const [getJobDetails, { loading: jobDetailsLoading }] = useLazyQuery(GET_JOB_BY_PK_QUICK_INTAKE, {
-    variables: { id: job.id },
     onCompleted: (data) => {
       if (data?.jobs_by_pk) {
         const totalHours =
@@ -204,7 +203,7 @@ export function JobsDetailHeaderActionsToggleProduction({
       open={popOverVisible}
       onOpenChange={setPopOverVisible}
       onClick={(e) => {
-        getJobDetails();
+        getJobDetails({ id: job.id });
         e.stopPropagation();
       }}
       getPopupContainer={(trigger) => trigger.parentNode}

client/src/components/jobs-detail-header/jobs-detail-header.component.jsx

@@ -1,5 +1,5 @@
 import { BranchesOutlined, ExclamationCircleFilled, PauseCircleOutlined, WarningFilled } from "@ant-design/icons";
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Card, Checkbox, Col, Divider, Row, Space, Tag, Tooltip } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -139,7 +139,10 @@ export function JobsDetailHeader({ job, bodyshop, disabled, insertAuditTrail, is
                   ) : null}
                 </Space>
               </DataLabel>
-              <DataLabel label={t("jobs.fields.comment")} styles={{ value: { overflow: "hidden", textOverflow: "ellipsis" } }}>
+              <DataLabel
+                label={t("jobs.fields.comment")}
+                styles={{ value: { overflow: "hidden", textOverflow: "ellipsis" } }}
+              >
                 <ProductionListColumnComment record={job} />
               </DataLabel>
               {!isPartsEntry && <DataLabel label={t("jobs.fields.ins_co_nm_short")}>{job.ins_co_nm}</DataLabel>}
@@ -281,7 +284,10 @@ export function JobsDetailHeader({ job, bodyshop, disabled, insertAuditTrail, is
                   {job.owner?.tax_number || ""}
                 </DataLabel>
               )}
-              <DataLabel label={t("owners.fields.note")} styles={{ value: { overflow: "hidden", textOverflow: "ellipsis" } }}>
+              <DataLabel
+                label={t("owners.fields.note")}
+                styles={{ value: { overflow: "hidden", textOverflow: "ellipsis" } }}
+              >
                 {job.owner?.note || ""}
               </DataLabel>
             </div>

client/src/components/jobs-detail-labor/jobs-detail-labor.container.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { GET_LINE_TICKET_BY_PK } from "../../graphql/jobs-lines.queries";
 import AlertComponent from "../alert/alert.component";
 import JobsDetailLaborComponent from "./jobs-detail-labor.component";

client/src/components/jobs-documents-gallery/jobs-document-gallery.reassign.component.jsx

@@ -1,4 +1,4 @@
-import { useApolloClient } from "@apollo/client";
+import { useApolloClient } from "@apollo/client/react";
 import { Button, Form, Popover, Space } from "antd";
 import axios from "axios";
 import { useMemo, useState } from "react";

client/src/components/jobs-documents-gallery/jobs-documents-gallery.container.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { GET_DOCUMENTS_BY_JOB } from "../../graphql/documents.queries";
 import AlertComponent from "../alert/alert.component";
 import JobDocumentsImgProxy from "../jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.component";

client/src/components/jobs-documents-imgproxy-gallery/jobs-document-imgproxy-gallery.reassign.component.jsx

@@ -1,4 +1,4 @@
-import { useApolloClient } from "@apollo/client";
+import { useApolloClient } from "@apollo/client/react";
 import { Button, Form, Popover, Space } from "antd";
 import axios from "axios";
 import { useMemo, useState } from "react";

client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.container.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { GET_DOCUMENTS_BY_JOB } from "../../graphql/documents.queries";
 import AlertComponent from "../alert/alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";