refactor: switch to use graphqlcodegen client-preset (#1173)

As we use on other internal projects, use the client-preset for codegen.
This means we can more easily:

- make use of other apollo operations like `useSuspenseQuery`
- migrate code from internal codebases to here
- in due course, move towards co-locating queries with their components,
and [using fragment
hiding](https://the-guild.dev/blog/unleash-the-power-of-fragments-with-graphql-codegen)
to better track what needs to be queried

I've tried to be mechanical about the changes here, limiting changes to
just what was needed.

.gitattributes

@@ -1,3 +1,4 @@
 *.generated.tsx linguist-generated
 src/graphql/types.ts linguist-generated
+src/graphql-client/*.ts linguist-generated
 *.po linguist-generated

.prettierignore

@@ -2,6 +2,9 @@ node_modules
 build
 src/locales/*.js
 
+# these files are code generated
+src/graphql-client/*.ts
+
 # npm and prettier fight over a EOF on these files, let npm win:
 package.json
 package-lock.json

codegen.ts

@@ -2,8 +2,17 @@ import { CodegenConfig } from "@graphql-codegen/cli";
 
 const config: CodegenConfig = {
   schema: "../ads-serve/src/graphql/schema.graphql",
-  documents: "./src/**/*.graphql",
-  hooks: { afterAllFileWrite: ["prettier --write"] },
+  documents: ["src/**/*.ts", "src/**/*.tsx", "src/**/*.graphql"],
+  ignoreNoDocuments: true,
+  overwrite: true,
+  generates: {
+    "./src/graphql-client/": {
+      preset: "client",
+      presetConfig: {
+        fragmentMasking: false,
+      },
+    },
+  },
   config: {
     strictScalars: true,
     useTypeImports: true,
@@ -16,20 +25,6 @@ const config: CodegenConfig = {
       JSONObject: "object",
     },
   },
-  generates: {
-    "src/": {
-      preset: "near-operation-file",
-      presetConfig: {
-        extension: ".generated.tsx",
-        baseTypesPath: "graphql/types.ts",
-      },
-      plugins: ["typescript-operations", "typescript-react-apollo"],
-      config: { withHooks: true, withRefetchFn: true, skipTypename: true },
-    },
-    "src/graphql/types.ts": {
-      plugins: ["typescript"],
-      config: { onlyOperationTypes: true },
-    },
-  },
 };
+
 export default config;

package.json

@@ -52,10 +52,6 @@
   "devDependencies": {
     "@babel/core": "7.24.4",
     "@graphql-codegen/cli": "5.0.2",
-    "@graphql-codegen/near-operation-file-preset": "3.0.0",
-    "@graphql-codegen/typescript": "4.0.6",
-    "@graphql-codegen/typescript-operations": "4.2.0",
-    "@graphql-codegen/typescript-react-apollo": "4.3.0",
     "@lingui/cli": "4.10.0",
     "@lingui/vite-plugin": "4.10.0",
     "@types/lodash": "4.17.0",

src/auth/components/AdvertiserAddress.tsx

@@ -2,9 +2,9 @@ import { Box, Stack } from "@mui/material";
 import { FormikTextField } from "@/form/FormikHelpers";
 import { CountryPicker } from "@/components/Country/CountryPicker";
 import { PropsWithChildren } from "react";
-import { AdvertiserBillingAddressFragment } from "@/graphql/advertiser.generated";
 import { useLingui } from "@lingui/react";
 import { msg } from "@lingui/macro";
+import { AdvertiserBillingAddressFragment } from "@/graphql-client/graphql";
 
 interface Props {
   address: AdvertiserBillingAddressFragment["billingAddress"];

src/auth/components/AdvertiserDetailsForm.tsx

@@ -4,21 +4,22 @@ import { useAdvertiser } from "@/auth/hooks/queries/useAdvertiser";
 import { Form, Formik } from "formik";
 import { AdvertiserAddress } from "@/auth/components/AdvertiserAddress";
 import { useAuthContext } from "@/auth/context/auth.hook";
-import {
-  useAdvertiserBillingAddressQuery,
-  useUpdateAdvertiserMutation,
-} from "@/graphql/advertiser.generated";
 import { getUser } from "@/auth/lib";
 import { AdvertiserForm, initialAdvertiserForm } from "@/auth/components/types";
 import { useHistory } from "react-router-dom";
-import { PaymentType } from "@/graphql/types";
+import {
+  AdvertiserBillingAddressDocument,
+  PaymentType,
+  UpdateAdvertiserDocument,
+} from "@/graphql-client/graphql";
 import { AdvertiserAgreed } from "@/auth/components/AdvertiserAgreed";
 import { FormikSubmitButton } from "@/form/FormikButton";
 import { AdvertiserSchema } from "@/validation/AdvertiserSchema";
 import { useState } from "react";
 import { useTrackWithMatomo } from "@/hooks/useTrackWithMatomo";
 import _ from "lodash";
 import { msg, Trans } from "@lingui/macro";
+import { useMutation, useQuery } from "@apollo/client";
 
 export function AdvertiserDetailsForm() {
   const { trackMatomoEvent } = useTrackWithMatomo({
@@ -34,7 +35,7 @@ export function AdvertiserDetailsForm() {
     initialAdvertiserForm(!requiresPaymentAgree),
   );
 
-  const [mutation] = useUpdateAdvertiserMutation({
+  const [mutation] = useMutation(UpdateAdvertiserDocument, {
     async onCompleted() {
       const user = await getUser();
       setSessionUser(user);
@@ -46,7 +47,7 @@ export function AdvertiserDetailsForm() {
     },
   });
 
-  const { data, loading } = useAdvertiserBillingAddressQuery({
+  const { data, loading } = useQuery(AdvertiserBillingAddressDocument, {
     variables: { id: advertiser.id },
     onCompleted: (data) => {
       setInitial(initialAdvertiserForm(!requiresPaymentAgree, data.advertiser));

src/auth/components/types.ts

@@ -1,4 +1,4 @@
-import { AdvertiserBillingAddressFragment } from "@/graphql/advertiser.generated";
+import { AdvertiserBillingAddressFragment } from "@/graphql-client/graphql";
 
 export type AdvertiserForm = {
   tracking: boolean;

src/auth/context/auth.interface.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { ResponseUser } from "../lib";
-import { PaymentType } from "@/graphql/types";
+import { PaymentType } from "@/graphql-client/graphql";
 
 export type IAdvertiser = {
   id: string;

src/auth/hooks/queries/useAdvertiser.ts

@@ -1,6 +1,6 @@
 import { useAuthContext } from "@/auth/context/auth.hook";
 import { IAdvertiser } from "@/auth/context/auth.interface";
-import { PaymentType } from "@/graphql/types";
+import { PaymentType } from "@/graphql-client/graphql";
 
 export function useAdvertiser(): {
   advertiser: IAdvertiser;

src/auth/lib/index.ts

@@ -1,6 +1,8 @@
-import { UserFragment } from "@/graphql/user.generated";
-import { AdvertiserFragment } from "@/graphql/advertiser.generated";
-import { PaymentType } from "@/graphql/types";
+import {
+  AdvertiserFragment,
+  PaymentType,
+  UserFragment,
+} from "@/graphql-client/graphql";
 import {
   buildAdServerEndpoint,
   buildAdServerV2Endpoint,

src/components/Assets/AdvertiserAssets.tsx

@@ -1,24 +1,25 @@
-import {
-  AdvertiserImageFragment,
-  useAdvertiserImagesQuery,
-} from "@/graphql/advertiser.generated";
 import { useAdvertiser } from "@/auth/hooks/queries/useAdvertiser";
 import { ErrorDetail } from "@/components/Error/ErrorDetail";
 import { CardContainer } from "@/components/Card/CardContainer";
 import { Grid, LinearProgress, Typography } from "@mui/material";
 import MiniSideBar from "@/components/Drawer/MiniSideBar";
 import { ImagePreview } from "@/components/Assets/ImagePreview";
-import { CampaignFormat } from "@/graphql/types";
+import {
+  AdvertiserImageFragment,
+  AdvertiserImagesDocument,
+  CampaignFormat,
+} from "@/graphql-client/graphql";
 import { RouteSelectionButton } from "@/components/Route/RouteSelectionButton";
 import Box from "@mui/material/Box";
 import { useTrackMatomoPageView } from "@/hooks/useTrackWithMatomo";
 import { msg, Trans } from "@lingui/macro";
 import dayjs from "dayjs";
+import { useQuery } from "@apollo/client";
 
 export function AdvertiserAssets() {
   useTrackMatomoPageView({ documentTitle: "Advertiser Assets" });
   const { advertiser } = useAdvertiser();
-  const { data, loading, error } = useAdvertiserImagesQuery({
+  const { data, loading, error } = useQuery(AdvertiserImagesDocument, {
     variables: { id: advertiser.id },
     initialFetchPolicy: "cache-and-network",
     nextFetchPolicy: "cache-only",

src/components/Assets/ImageAutocomplete.tsx

@@ -1,11 +1,12 @@
-import { useAdvertiserImagesQuery } from "@/graphql/advertiser.generated";
 import { useAdvertiser } from "@/auth/hooks/queries/useAdvertiser";
 import { Autocomplete, createFilterOptions, TextField } from "@mui/material";
 import { useEffect, useState } from "react";
 import { useField } from "formik";
 import { UploadImage } from "@/components/Assets/UploadImage";
 import { useLingui } from "@lingui/react";
 import { msg } from "@lingui/macro";
+import { useQuery } from "@apollo/client";
+import { AdvertiserImagesDocument } from "@/graphql-client/graphql";
 
 type ImageOption = { label: string; image?: string };
 
@@ -18,7 +19,7 @@ export function ImageAutocomplete(props: { name: string }) {
   const showError = hasError && meta.touched;
   const { advertiser } = useAdvertiser();
   const [options, setOptions] = useState<ImageOption[]>();
-  const { data, loading } = useAdvertiserImagesQuery({
+  const { data, loading } = useQuery(AdvertiserImagesDocument, {
     variables: { id: advertiser.id },
   });
   const { _ } = useLingui();

src/components/Assets/UploadImage.tsx

@@ -14,7 +14,7 @@ import {
   StepLabel,
   Stepper,
 } from "@mui/material";
-import { CampaignFormat } from "@/graphql/types";
+import { CampaignFormat } from "@/graphql-client/graphql";
 import { useUploadFile } from "@/components/Assets/hooks/useUploadFile";
 import { NewImageButton } from "@/components/Navigation/NewImageButton";
 import { Trans } from "@lingui/macro";

src/components/Assets/hooks/useUploadFile.ts

@@ -1,14 +1,15 @@
 import { buildAdServerEndpoint, getEnvConfig } from "@/util/environment";
 import { useCallback, useState } from "react";
 import _ from "lodash";
-import {
-  refetchAdvertiserImagesQuery,
-  useUploadAdvertiserImageMutation,
-} from "@/graphql/advertiser.generated";
 import { useAdvertiser } from "@/auth/hooks/queries/useAdvertiser";
-import { CampaignFormat } from "@/graphql/types";
+import {
+  AdvertiserImagesDocument,
+  CampaignFormat,
+  UploadAdvertiserImageDocument,
+} from "@/graphql-client/graphql";
 import { UploadConfig } from "@/components/Assets/UploadImage";
 import { t } from "@lingui/macro";
+import { useMutation } from "@apollo/client";
 
 interface PutUploadResponse {
   // the pre-signed url to which the file should be uploaded to
@@ -29,9 +30,9 @@ export const useUploadFile = ({ onComplete }: Props = {}) => {
   const [state, setState] = useState<string>();
   const [loading, setLoading] = useState(false);
 
-  const [mutate] = useUploadAdvertiserImageMutation({
+  const [mutate] = useMutation(UploadAdvertiserImageDocument, {
     refetchQueries: [
-      { ...refetchAdvertiserImagesQuery({ id: advertiser.id }) },
+      { query: AdvertiserImagesDocument, variables: { id: advertiser.id } },
     ],
     onError(e) {
       setError(e.message);

src/components/Campaigns/CloneCampaign.tsx

@@ -9,22 +9,24 @@ import {
   LinearProgress,
   Tooltip,
 } from "@mui/material";
-import {
-  CampaignSummaryFragment,
-  useCreateCampaignMutation,
-  useLoadCampaignLazyQuery,
-} from "@/graphql/campaign.generated";
 import { useHistory } from "react-router-dom";
 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";
-import { CampaignFormat, CampaignSource } from "@/graphql/types";
+import {
+  AdvertiserCampaignsDocument,
+  CampaignFormat,
+  CampaignSource,
+  CampaignSummaryFragment,
+  CreateCampaignDocument,
+  LoadCampaignDocument,
+} from "@/graphql-client/graphql";
 import { msg, Trans } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
+import { useLazyQuery, useMutation } from "@apollo/client";
 
 interface Props {
   campaign?: CampaignSummaryFragment;
@@ -40,14 +42,16 @@ export function CloneCampaign({ campaign, disabled }: Props) {
   const { _ } = useLingui();
   const unableToClone = _(msg`Unable to clone campaign`);
 
-  const [getCampaign, { loading: getLoading }] = useLoadCampaignLazyQuery();
-  const [copyCampaign, { loading }] = useCreateCampaignMutation({
+  const [getCampaign, { loading: getLoading }] =
+    useLazyQuery(LoadCampaignDocument);
+  const [copyCampaign, { loading }] = useMutation(CreateCampaignDocument, {
     refetchQueries: [
       {
-        ...refetchAdvertiserCampaignsQuery({
+        query: AdvertiserCampaignsDocument,
+        variables: {
           id: advertiser.id,
           filter: { from: fromDate?.toISOString() },
-        }),
+        },
       },
     ],
     onCompleted(data) {

src/components/Creatives/CreateCreativeButton.tsx

@@ -5,23 +5,24 @@ import {
   initialCreative,
 } from "@/user/views/adsManager/types";
 import _ from "lodash";
-import {
-  refetchAdvertiserCreativesQuery,
-  useCreateCreativeMutation,
-} from "@/graphql/creative.generated";
 import { useField, useFormikContext } from "formik";
 import { useAdvertiser } from "@/auth/hooks/queries/useAdvertiser";
 import { LoadingButton } from "@mui/lab";
 import { validCreativeFields } from "@/user/library";
 import { Trans } from "@lingui/macro";
+import { useMutation } from "@apollo/client";
+import {
+  AdvertiserCreativesDocument,
+  CreateCreativeDocument,
+} from "@/graphql-client/graphql";
 
 export function CreateCreativeButton() {
   const { values, setFieldValue } = useFormikContext<CampaignForm>();
   const [, , isCreating] = useField<boolean>("isCreating");
   const [, newMeta, newHelper] = useField<Creative>("newCreative");
   const { advertiser } = useAdvertiser();
 
-  const [create, { loading }] = useCreateCreativeMutation({
+  const [create, { loading }] = useMutation(CreateCreativeDocument, {
     async onCompleted(data) {
       newHelper.setValue(initialCreative);
       newHelper.setTouched(false);
@@ -35,7 +36,8 @@ export function CreateCreativeButton() {
     },
     refetchQueries: [
       {
-        ...refetchAdvertiserCreativesQuery({ advertiserId: advertiser.id }),
+        query: AdvertiserCreativesDocument,
+        variables: { advertiserId: advertiser.id },
       },
     ],
   });

src/components/Creatives/CreativeCampaigns.tsx

@@ -1,4 +1,3 @@
-import { CampaignsForCreativeQuery } from "@/graphql/creative.generated";
 import { Link as RouterLink } from "react-router-dom";
 import {
   Link,
@@ -14,6 +13,7 @@ import _ from "lodash";
 import { Status } from "@/components/Campaigns/Status";
 import { ApolloError } from "@apollo/client";
 import { msg, Trans } from "@lingui/macro";
+import { CampaignsForCreativeQuery } from "@/graphql-client/graphql";
 
 interface Props {
   data?: CampaignsForCreativeQuery;

src/components/Creatives/CreativeForm.tsx

@@ -12,14 +12,17 @@ import { SubmitPanel } from "@/components/Button/SubmitPanel";
 import { useGetCreativeDetails } from "@/components/Creatives/hooks/useGetCreativeDetails";
 import { useSubmitCreative } from "@/components/Creatives/hooks/useSubmitCreative";
 import CreativeCampaigns from "@/components/Creatives/CreativeCampaigns";
-import { useCampaignsForCreativeQuery } from "@/graphql/creative.generated";
 import { useAdvertiser } from "@/auth/hooks/queries/useAdvertiser";
-import { CreativeInput } from "@/graphql/types";
-import { CampaignFragment } from "@/graphql/campaign.generated";
+import {
+  CampaignFragment,
+  CampaignsForCreativeDocument,
+  CreativeInput,
+} from "@/graphql-client/graphql";
 import _ from "lodash";
 import { isReviewableState } from "@/util/displayState";
 import { useTrackMatomoPageView } from "@/hooks/useTrackWithMatomo";
 import { msg, Trans } from "@lingui/macro";
+import { useQuery } from "@apollo/client";
 
 interface Params {
   id: string;
@@ -40,7 +43,7 @@ export function CreativeForm() {
     data: campaigns,
     loading: cLoading,
     error: cError,
-  } = useCampaignsForCreativeQuery({
+  } = useQuery(CampaignsForCreativeDocument, {
     variables: { creativeId: id, advertiserId: advertiser.id },
     skip: id === "new",
   });