Skip to content

Commit

Permalink
refactor: switch to use graphqlcodegen client-preset (#1173)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
tackley authored Apr 25, 2024
1 parent 11b0bb2 commit c47e897
Show file tree
Hide file tree
Showing 92 changed files with 2,579 additions and 5,285 deletions.
1 change: 1 addition & 0 deletions .gitattributes
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
*.generated.tsx linguist-generated
src/graphql/types.ts linguist-generated
src/graphql-client/*.ts linguist-generated
*.po linguist-generated
3 changes: 3 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
29 changes: 12 additions & 17 deletions codegen.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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;
378 changes: 0 additions & 378 deletions package-lock.json

Large diffs are not rendered by default.

4 changes: 0 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion src/auth/components/AdvertiserAddress.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"];
Expand Down
15 changes: 8 additions & 7 deletions src/auth/components/AdvertiserDetailsForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -34,7 +35,7 @@ export function AdvertiserDetailsForm() {
initialAdvertiserForm(!requiresPaymentAgree),
);

const [mutation] = useUpdateAdvertiserMutation({
const [mutation] = useMutation(UpdateAdvertiserDocument, {
async onCompleted() {
const user = await getUser();
setSessionUser(user);
Expand All @@ -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));
Expand Down
2 changes: 1 addition & 1 deletion src/auth/components/types.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { AdvertiserBillingAddressFragment } from "@/graphql/advertiser.generated";
import { AdvertiserBillingAddressFragment } from "@/graphql-client/graphql";

export type AdvertiserForm = {
tracking: boolean;
Expand Down
2 changes: 1 addition & 1 deletion src/auth/context/auth.interface.ts
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/auth/hooks/queries/useAdvertiser.ts
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
8 changes: 5 additions & 3 deletions src/auth/lib/index.ts
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
13 changes: 7 additions & 6 deletions src/components/Assets/AdvertiserAssets.tsx
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
5 changes: 3 additions & 2 deletions src/components/Assets/ImageAutocomplete.tsx
Original file line number Diff line number Diff line change
@@ -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 };

Expand All @@ -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();
Expand Down
2 changes: 1 addition & 1 deletion src/components/Assets/UploadImage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
15 changes: 8 additions & 7 deletions src/components/Assets/hooks/useUploadFile.ts
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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);
Expand Down
26 changes: 15 additions & 11 deletions src/components/Campaigns/CloneCampaign.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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) {
Expand Down
14 changes: 8 additions & 6 deletions src/components/Creatives/CreateCreativeButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -35,7 +36,8 @@ export function CreateCreativeButton() {
},
refetchQueries: [
{
...refetchAdvertiserCreativesQuery({ advertiserId: advertiser.id }),
query: AdvertiserCreativesDocument,
variables: { advertiserId: advertiser.id },
},
],
});
Expand Down
2 changes: 1 addition & 1 deletion src/components/Creatives/CreativeCampaigns.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { CampaignsForCreativeQuery } from "@/graphql/creative.generated";
import { Link as RouterLink } from "react-router-dom";
import {
Link,
Expand All @@ -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;
Expand Down
11 changes: 7 additions & 4 deletions src/components/Creatives/CreativeForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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",
});
Expand Down
Loading

0 comments on commit c47e897

Please sign in to comment.