bugfix/IO-3531 - Disable unnecessary refetch queries causing page reload.

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

@@ -57,6 +57,7 @@ const CardPaymentModalComponent = ({
     QUERY_RO_AND_OWNER_BY_JOB_PKS,
     {
       fetchPolicy: "network-only",
+      notifyOnNetworkStatusChange: true
     }
   );
 

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

@@ -47,6 +47,7 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
   const [getConversations, { loading, data, refetch, called }] = useLazyQuery(CONVERSATION_LIST_QUERY, {
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
+    notifyOnNetworkStatusChange: true,
     ...(pollInterval > 0 ? { pollInterval } : {})
   });
 

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

@@ -157,6 +157,7 @@ export function JobsDetailHeaderActions({
     variables: watcherVars,
     skip: !jobId,
     fetchPolicy: "cache-first",
+    notifyOnNetworkStatusChange: true
   });
 
   const jobWatchersCount = jobWatchersData?.job_watchers?.length ?? job?.job_watchers?.length ?? 0;

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

@@ -81,16 +81,17 @@ export function JobsDetailHeader({ job, bodyshop, disabled, insertAuditTrail, is
   const employeeData = bodyshop.associations.find((a) => a.useremail === job.admin_clerk)?.user?.employee ?? null;
 
   // Handle checkbox changes
-  const handleCheckboxChange = async (field, checked) => {
+  const handleCheckboxChange = async (field, e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const checked = e.target.checked;
     const value = checked ? dayjs().toISOString() : null;
     try {
       const ret = await updateJob({
         variables: {
           jobId: job.id,
           job: { [field]: value }
-        },
-        refetchQueries: ["GET_JOB_BY_PK"],
-        awaitRefetchQueries: true
+        }
       });
       insertAuditTrail({
         jobid: job.id,
@@ -182,7 +183,7 @@ export function JobsDetailHeader({ job, bodyshop, disabled, insertAuditTrail, is
                     <Space>
                       <Checkbox
                         checked={!!job.estimate_sent_approval}
-                        onChange={(e) => handleCheckboxChange("estimate_sent_approval", e.target.checked)}
+                        onChange={(e) => handleCheckboxChange("estimate_sent_approval", e)}
                         disabled={disabled || isPartsEntry}
                       >
                         {job.estimate_sent_approval && (
@@ -197,7 +198,7 @@ export function JobsDetailHeader({ job, bodyshop, disabled, insertAuditTrail, is
                     <Space>
                       <Checkbox
                         checked={!!job.estimate_approved}
-                        onChange={(e) => handleCheckboxChange("estimate_approved", e.target.checked)}
+                        onChange={(e) => handleCheckboxChange("estimate_approved", e)}
                         disabled={disabled || isPartsEntry}
                       >
                         {job.estimate_approved && (

client/src/components/notification-center/notification-center.container.jsx

@@ -56,6 +56,7 @@ const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount,
       where: whereClause
     },
     fetchPolicy: "cache-and-network",
+    notifyOnNetworkStatusChange: true,
     errorPolicy: "all",
     pollInterval: isConnected ? 0 : day.duration(NOTIFICATION_POLL_INTERVAL_SECONDS, "seconds").asMilliseconds(),
     skip: skipQuery

client/src/components/parts-order-modal/parts-order-modal.container.jsx

@@ -17,6 +17,7 @@ import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
 import AlertComponent from "../alert/alert.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import PartsOrderModalComponent from "./parts-order-modal.component";
 import axios from "axios";
 import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
@@ -65,7 +66,7 @@ export function PartsOrderModalContainer({
   const sendTypeState = useState("e");
   const sendType = sendTypeState[0];
 
-  const { error, data } = useQuery(QUERY_ALL_VENDORS_FOR_ORDER, {
+  const { loading, error, data } = useQuery(QUERY_ALL_VENDORS_FOR_ORDER, {
     skip: !open,
     variables: { jobId: jobId },
     fetchPolicy: "network-only",
@@ -371,7 +372,6 @@ export function PartsOrderModalContainer({
     }
   }, [open, linesToOrder, form]);
 
-  //This used to have a loading component spinner for the vendor data. With Apollo 4, the NetworkState isn't emitting correctly, so loading just gets set to true the second time, and no longer works as expected.
   return (
     <Modal
       open={open}
@@ -390,14 +390,18 @@ export function PartsOrderModalContainer({
     >
       {error ? <AlertComponent title={error.message} type="error" /> : null}
       <Form form={form} layout="vertical" autoComplete="no" onFinish={handleFinish} initialValues={initialValues}>
-        <PartsOrderModalComponent
-          form={form}
-          vendorList={data?.vendors || []}
-          sendTypeState={sendTypeState}
-          isReturn={isReturn}
-          preferredMake={data && data.jobs[0] && data.jobs[0].v_make_desc}
-          job={job}
-        />
+        {loading ? (
+          <LoadingSpinner />
+        ) : (
+          <PartsOrderModalComponent
+            form={form}
+            vendorList={data?.vendors || []}
+            sendTypeState={sendTypeState}
+            isReturn={isReturn}
+            preferredMake={data && data.jobs[0] && data.jobs[0].v_make_desc}
+            job={job}
+          />
+        )}
       </Form>
     </Modal>
   );

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

@@ -33,8 +33,7 @@ export function TaskListContainer({
   currentUser,
   onlyMine,
   parentJobId,
-  showRo = true,
-  disableJobRefetch = false
+  showRo = true
 }) {
   const { t } = useTranslation();
   const notification = useNotification();
@@ -91,10 +90,6 @@ export function TaskListContainer({
         refetchQueries: [Object.keys(query)[0]]
       };
 
-      if (!disableJobRefetch) {
-        toggledTaskObject.refetchQueries.push("GET_JOB_BY_PK");
-      }
-
       const toggledTask = await toggleTaskCompleted(toggledTaskObject);
 
       if (!toggledTask.errors) {
@@ -144,10 +139,6 @@ export function TaskListContainer({
         refetchQueries: [Object.keys(query)[0]]
       };
 
-      if (!disableJobRefetch) {
-        toggledTaskObject.refetchQueries.push("GET_JOB_BY_PK");
-      }
-
       const toggledTask = await toggleTaskDeleted(toggledTaskObject);
 
       if (!toggledTask.errors) {

client/src/pages/tasks/tasks.page.component.jsx

@@ -23,17 +23,10 @@ export function TasksPageComponent({ bodyshop, currentUser, type }) {
           relationshipType={"assigned_to"}
           query={{ QUERY_MY_TASKS_PAGINATED }}
           titleTranslation={"tasks.titles.my_tasks"}
-          disableJobRefetch={true}
         />
       );
     case taskPageTypes.ALL_TASKS:
-      return (
-        <TaskListContainer
-          query={{ QUERY_ALL_TASKS_PAGINATED }}
-          titleTranslation={"tasks.titles.all_tasks"}
-          disableJobRefetch={true}
-        />
-      );
+      return <TaskListContainer query={{ QUERY_ALL_TASKS_PAGINATED }} titleTranslation={"tasks.titles.all_tasks"} />;
     default:
       return <></>;
   }

client/src/utils/GraphQLClient.js

@@ -248,8 +248,7 @@ const client = new ApolloClient({
     watchQuery: {
       fetchPolicy: "network-only",
       nextFetchPolicy: "network-only",
-      errorPolicy: "ignore",
-      notifyOnNetworkStatusChange: false
+      errorPolicy: "ignore"
     },
     query: {
       fetchPolicy: "network-only",