fix: refetch queries correctly (#869)

* fix: make sure queries refetch appropriatley on create and edit

* fix: specify fetch policies

src/components/Campaigns/CampaignAgeFilter.tsx

@@ -1,17 +1,17 @@
 import { FormControlLabel, Switch, Typography } from "@mui/material";
 import _ from "lodash";
 import moment from "moment";
-import { Dispatch } from "react";
+import { useContext } from "react";
+import { FilterContext } from "state/context";
 
 interface Props {
-  fromDate: Date | null;
-  onChange: Dispatch<Date | null>;
   disabled?: boolean;
 }
 
-export const CampaignAgeFilter = ({ fromDate, onChange, disabled }: Props) => {
+export const CampaignAgeFilter = ({ disabled }: Props) => {
+  const { fromDate, setFromDate } = useContext(FilterContext);
   const onOldCampaignToggle = (showOld: boolean) => {
-    onChange(
+    setFromDate(
       showOld ? null : moment().subtract(6, "month").startOf("day").toDate(),
     );
   };

src/components/Campaigns/CloneCampaign.tsx

@@ -14,12 +14,13 @@ import {
   useCreateCampaignMutation,
 } from "graphql/campaign.generated";
 import { useHistory } from "react-router-dom";
-import { useState } from "react";
-import { AdvertiserCampaignsDocument } from "graphql/advertiser.generated";
+import { useContext, useState } from "react";
+import { refetchAdvertiserCampaignsQuery } from "graphql/advertiser.generated";
 import { createCampaignFromFragment } from "form/fragmentUtil";
 import { useAdvertiser } from "auth/hooks/queries/useAdvertiser";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import { useUser } from "auth/hooks/queries/useUser";
+import { FilterContext } from "state/context";
 
 interface Props {
   campaignFragment?: CampaignFragment | null;
@@ -28,15 +29,18 @@ interface Props {
 
 export function CloneCampaign({ campaignFragment, useChip }: Props) {
   const { advertiser } = useAdvertiser();
+  const { fromDate } = useContext(FilterContext);
   const { userId } = useUser();
   const history = useHistory();
   const [open, setOpen] = useState(false);
 
   const [copyCampaign, { loading }] = useCreateCampaignMutation({
     refetchQueries: [
       {
-        query: AdvertiserCampaignsDocument,
-        variables: { id: advertiser.id },
+        ...refetchAdvertiserCampaignsQuery({
+          id: advertiser.id,
+          filter: { from: fromDate },
+        }),
       },
     ],
     onCompleted(data) {

src/components/EnhancedTable/renderers.tsx

@@ -2,19 +2,20 @@ import { Box, Tooltip } from "@mui/material";
 import _ from "lodash";
 import { format, formatDistanceToNow, parseISO } from "date-fns";
 import { CellValue } from "./EnhancedTable";
-import { ReactChild, ReactNode } from "react";
+import { ReactChild, ReactNode, useContext } from "react";
 import { formatInTimeZone } from "date-fns-tz";
 import enUS from "date-fns/locale/en-US";
 import {
   CampaignSummaryFragment,
   LoadCampaignAdsDocument,
   useUpdateCampaignMutation,
 } from "graphql/campaign.generated";
-import { AdvertiserCampaignsDocument } from "graphql/advertiser.generated";
 import { useUpdateAdSetMutation } from "graphql/ad-set.generated";
 import { OnOff } from "../Switch/OnOff";
 import { displayFromCampaignState } from "util/displayState";
 import { AdSetDetails } from "user/adSet/AdSetList";
+import { FilterContext } from "state/context";
+import { refetchAdvertiserCampaignsQuery } from "graphql/advertiser.generated";
 
 export type CellValueRenderer = (value: CellValue) => ReactNode;
 const ADS_DEFAULT_TIMEZONE = "America/New_York";
@@ -90,16 +91,16 @@ export function renderMonetaryAmount(
 }
 
 export function campaignOnOffState(
-  c: CampaignSummaryFragment & { fromDate: Date | null; advertiserId: string },
+  c: CampaignSummaryFragment & { advertiserId: string },
 ): ReactNode {
+  const { fromDate } = useContext(FilterContext);
   const [updateCampaign, { loading }] = useUpdateCampaignMutation({
     refetchQueries: [
       {
-        query: AdvertiserCampaignsDocument,
-        variables: {
+        ...refetchAdvertiserCampaignsQuery({
           id: c.advertiserId,
-          filter: { from: c.fromDate },
-        },
+          filter: { from: fromDate },
+        }),
       },
     ],
   });

src/state/context.ts

@@ -26,3 +26,8 @@ export const getAllDrafts = () => {
 
   return campaigns;
 };
+
+export const FilterContext = createContext({
+  fromDate: null as Date | null,
+  setFromDate: (_d: Date | null) => {},
+});

src/user/User.tsx

@@ -1,4 +1,4 @@
-import { ComponentType, useMemo } from "react";
+import { ComponentType, useMemo, useState } from "react";
 import { Redirect, Route, Switch } from "react-router-dom";
 
 import {
@@ -19,6 +19,8 @@ import { CampaignView } from "user/views/user/CampaignView";
 import { CampaignReportView } from "user/views/user/CampaignReportView";
 import { Profile } from "user/views/user/Profile";
 import { IAdvertiser } from "auth/context/auth.interface";
+import moment from "moment";
+import { FilterContext } from "state/context";
 
 const buildApolloClient = () => {
   const httpLink = createHttpLink({
@@ -34,59 +36,70 @@ const buildApolloClient = () => {
 
 export function User() {
   const client = useMemo(() => buildApolloClient(), []);
+  const [fromDate, setFromDate] = useState<Date | null>(
+    moment().subtract(6, "month").startOf("day").toDate(),
+  );
+
   return (
     <ApolloProvider client={client}>
-      <Box height="100%">
-        <Box display="flex">
-          <Navbar />
-          <Box
-            width="100%"
-            height="100%"
-            padding={1}
-            marginTop="64px"
-            bgcolor="background.default"
-          >
-            <Switch>
-              {/* /adsmanager */}
-              <ProtectedRoute
-                path="/user/main/adsmanager/advanced/new/:draftId"
-                authedComponent={NewCampaign}
-                validateAdvertiserProperty={(a) => a.selfServiceCreate}
-              />
-
-              <ProtectedRoute
-                path="/user/main/adsmanager/advanced/:campaignId"
-                authedComponent={EditCampaign}
-                validateAdvertiserProperty={(a) => a.selfServiceEdit}
-              />
-
-              <ProtectedRoute
-                path="/user/main/complete/:mode"
-                authedComponent={CompletionForm}
-              />
-
-              {/* /campaigns/:campaignId/analytics - */}
-              <ProtectedRoute
-                path="/user/main/campaign/:campaignId"
-                authedComponent={CampaignReportView}
-              />
-
-              <Route path="/user/main/settings" component={Settings} />
-
-              <Route path="/user/main/profile" component={Profile} />
-
-              <ProtectedRoute
-                path="/user/main/campaign"
-                authedComponent={CampaignView}
-                unauthedComponent={AdvertiserAgreed}
-              />
-
-              {/* default */}
-              <Redirect to="/user/main/campaign" />
-            </Switch>
+      <FilterContext.Provider
+        value={{
+          fromDate,
+          setFromDate,
+        }}
+      >
+        <Box height="100%">
+          <Box display="flex">
+            <Navbar />
+            <Box
+              width="100%"
+              height="100%"
+              padding={1}
+              marginTop="64px"
+              bgcolor="background.default"
+            >
+              <Switch>
+                {/* /adsmanager */}
+                <ProtectedRoute
+                  path="/user/main/adsmanager/advanced/new/:draftId"
+                  authedComponent={NewCampaign}
+                  validateAdvertiserProperty={(a) => a.selfServiceCreate}
+                />
+
+                <ProtectedRoute
+                  path="/user/main/adsmanager/advanced/:campaignId"
+                  authedComponent={EditCampaign}
+                  validateAdvertiserProperty={(a) => a.selfServiceEdit}
+                />
+
+                <ProtectedRoute
+                  path="/user/main/complete/:mode"
+                  authedComponent={CompletionForm}
+                />
+
+                {/* /campaigns/:campaignId/analytics - */}
+                <ProtectedRoute
+                  path="/user/main/campaign/:campaignId"
+                  authedComponent={CampaignReportView}
+                />
+
+                <Route path="/user/main/settings" component={Settings} />
+
+                <Route path="/user/main/profile" component={Profile} />
+
+                <ProtectedRoute
+                  path="/user/main/campaign"
+                  authedComponent={CampaignView}
+                  unauthedComponent={AdvertiserAgreed}
+                />
+
+                {/* default */}
+                <Redirect to="/user/main/campaign" />
+              </Switch>
+            </Box>
           </Box>
         </Box>
-      </Box>
+      </FilterContext.Provider>
     </ApolloProvider>
   );
 }

src/user/campaignList/CampaignList.tsx

@@ -25,14 +25,12 @@ import { CampaignSummaryFragment } from "graphql/campaign.generated";
 
 interface Props {
   advertiser?: AdvertiserCampaignsFragment | null;
-  fromDate: Date | null;
   selectedCampaigns: string[];
   onCampaignSelect: (c: string, insert: boolean) => void;
 }
 
 export function CampaignList({
   advertiser,
-  fromDate,
   selectedCampaigns,
   onCampaignSelect,
 }: Props) {
@@ -60,7 +58,6 @@ export function CampaignList({
       extendedRenderer: (r) =>
         campaignOnOffState({
           ...r,
-          fromDate,
           advertiserId: advertiser?.id ?? "",
         }),
       sx: { width: "1px" },

src/user/views/adsManager/views/advanced/components/form/EditCampaign.tsx

@@ -12,12 +12,16 @@ import { BaseForm } from "./components/BaseForm";
 import { useAdvertiser } from "auth/hooks/queries/useAdvertiser";
 import { useCreatePaymentSession } from "checkout/hooks/useCreatePaymentSession";
 import { ErrorDetail } from "components/Error/ErrorDetail";
+import { refetchAdvertiserCampaignsQuery } from "graphql/advertiser.generated";
+import { useContext } from "react";
+import { FilterContext } from "state/context";
 
 interface Params {
   campaignId: string;
 }
 
 export function EditCampaign() {
+  const { fromDate } = useContext(FilterContext);
   const { advertiser } = useAdvertiser();
   const history = useHistory();
   const params = useParams<Params>();
@@ -45,6 +49,14 @@ export function EditCampaign() {
     onError() {
       alert("Unable to Update Campaign.");
     },
+    refetchQueries: [
+      {
+        ...refetchAdvertiserCampaignsQuery({
+          id: advertiser.id,
+          filter: { from: fromDate },
+        }),
+      },
+    ],
   });
 
   if (error) {

src/user/views/adsManager/views/advanced/components/form/NewCampaign.tsx

@@ -8,18 +8,20 @@ import { useCreateCampaignMutation } from "graphql/campaign.generated";
 import { useHistory, useParams } from "react-router-dom";
 import { BaseForm } from "./components/BaseForm";
 import { PersistFormValues } from "form/PersistFormValues";
-import { DraftContext } from "state/context";
+import { DraftContext, FilterContext } from "state/context";
 import { useAdvertiser } from "auth/hooks/queries/useAdvertiser";
 import { useCreatePaymentSession } from "checkout/hooks/useCreatePaymentSession";
 import { PaymentType } from "graphql/types";
 import { useUser } from "auth/hooks/queries/useUser";
+import { refetchAdvertiserCampaignsQuery } from "graphql/advertiser.generated";
 
 interface Params {
   draftId: string;
 }
 
 export function NewCampaign() {
   const history = useHistory();
+  const { fromDate } = useContext(FilterContext);
   const params = useParams<Params>();
   const { advertiser } = useAdvertiser();
   const { userId } = useUser();
@@ -49,6 +51,14 @@ export function NewCampaign() {
     onError() {
       alert("Unable to create Campaign.");
     },
+    refetchQueries: [
+      {
+        ...refetchAdvertiserCampaignsQuery({
+          id: advertiser.id,
+          filter: { from: fromDate },
+        }),
+      },
+    ],
   });
 
   if (loading) {