Generate Zod types from the GraphQL schema TypeScript types!

I wrote the Zod types manually so far, but I'd like to get some code generation going to help.

We can't remove the manually written Zod types just yet, since they're more specific than the generated ones, but hopefully soon!

Author: miorel

workspaces/leetcode-api/graphql-codegen.config.ts

@@ -1,6 +1,8 @@
 import type { CodegenConfig } from "@graphql-codegen/cli";
+import type { Types as GraphQLCodegen } from "@graphql-codegen/plugin-helpers";
+import immutableUpdate from "immutability-helper";
 
-const commonTypeScriptPluginConfig = {
+const commonTypeScriptPluginConfig: GraphQLCodegen.PluginConfig = {
   arrayInputCoercion: false,
   enumsAsTypes: true,
   defaultScalarType: "unknown",
@@ -10,50 +12,91 @@ const commonTypeScriptPluginConfig = {
   // TODO: add strictScalars: true
 };
 
-const headerPlugin = {
+const headerPlugin: GraphQLCodegen.OutputConfig = {
   add: {
     content: `
       // THIS FILE IS GENERATED! DO NOT MODIFY IT MANUALLY!!
       // Instead, update the generation process or inputs and run \`yarn codegen\`.
     `,
+    placement: "prepend",
+  },
+};
+
+const nearOperationFilePreset: GraphQLCodegen.ConfiguredOutput = {
+  preset: "near-operation-file",
+  presetConfig: {
+    // We enable `globalNamespace` below so that we don't import the base
+    // types through the preset, but let the specified plugins add the imports
+    // if necessary. This allows us to make sure the base types import is
+    // below the header, and it uses the ".ts" extension.
+    baseTypesPath: "<not-used-but-cannot-be-empty>",
+
+    extension: ".generated.ts",
+    fileName: null as string | null,
+  },
+  plugins: [headerPlugin],
+  config: {
+    ...commonTypeScriptPluginConfig,
+
+    // Specified plugins will handle the imports and exports!
+    globalNamespace: true,
+    noExport: true,
   },
 };
 
 const config: CodegenConfig = {
   schema: "schema.graphql",
-  documents: ["src/**/*.graphql"],
+  documents: ["src/api/**/query.graphql"],
   overwrite: true,
   emitLegacyCommonJSImports: false,
   generates: {
+    // Generate the base types file!
     "src/graphqlTypes.generated.ts": {
       plugins: [headerPlugin, "typescript"],
       config: commonTypeScriptPluginConfig,
     },
-    "src/": {
-      preset: "near-operation-file",
-      presetConfig: {
-        // The base types are not imported because of the use of
-        // `globalNamespace` below, instead our custom plugin will add the
-        // import, so that it can end up _below_ the header.
-        baseTypesPath: "<not-used-but-cannot-be-empty>",
-
-        extension: ".generated.ts",
-        fileName: "fetchGraphQL",
+
+    // Generate a file for the query variables and result types, near each
+    // operation.
+    "src/api/**/queryTypes.generated.ts": immutableUpdate(
+      nearOperationFilePreset,
+      {
+        presetConfig: { fileName: { $set: "queryTypes" } },
+        plugins: {
+          $push: [
+            // Explicitly add the base types import, since the preset was
+            // tricked into not adding it.
+            {
+              add: {
+                content:
+                  '\n\nimport type * as Types from "../../graphqlTypes.generated.ts";\n\n',
+                placement: "content",
+              },
+            },
+
+            // Generate TypeScript operations types, overriding the
+            // `globalNamespace` which was set in the preset.
+            { "typescript-operations": { globalNamespace: false } },
+          ],
+        },
+
+        // Do export the types.
+        config: { noExport: { $set: false } },
       },
-      plugins: [
-        headerPlugin,
-        { "typescript-operations": { globalNamespace: false } },
-        "./src/scripts/codegen/graphqlCodegenPlugin.ts",
-      ],
-      config: {
-        ...commonTypeScriptPluginConfig,
-
-        // Our custom plugin will handle the imports and exports!
-        globalNamespace: true,
-        noExport: true,
+    ),
+
+    // Generate a small SDK for each operation using our custom plugin.
+    "src/api/**/fetchGraphQL.generated.ts": immutableUpdate(
+      nearOperationFilePreset,
+      {
+        presetConfig: { fileName: { $set: "fetchGraphQL" } },
+        plugins: {
+          $push: ["./src/scripts/codegen/graphqlCodegenPlugin.ts"],
+        },
       },
-    },
+    ),
   },
+
   hooks: {
     afterAllFileWrite: ["prettier --write"],
   },

workspaces/leetcode-api/package.json

@@ -42,11 +42,12 @@
     "cross-env": "7.0.3",
     "eslint": "9.12.0",
     "graphql-query-compress": "1.2.4",
+    "immutability-helper": "patch:immutability-helper@npm%3A3.1.1#~/.yarn/patches/immutability-helper-npm-3.1.1-482f1f8f58.patch",
     "jest": "29.7.0",
     "prettier": "3.3.3",
     "ts-jest": "29.2.5",
+    "ts-to-zod": "3.13.0",
     "tsx": "4.19.1",
-    "type-fest": "4.26.1",
     "typescript": "5.6.2"
   }
 }

workspaces/leetcode-api/src/api/active-daily-coding-challenge-question/fetchGraphQL.generated.ts

@@ -16,27 +16,25 @@ const questionZodType = z.object({
   titleSlug: questionTitleSlugZodType,
 });
 
-const activeDailyCodingChallengeQuestionZodType = z
-  .object({
-    activeDailyCodingChallengeQuestion: z.object({
-      date: z
-        .string()
-        .trim()
-        .regex(/^\d{4}-\d{2}-\d{2}$/),
-      question: questionZodType,
-    }),
-  })
-  .transform((data) => data.activeDailyCodingChallengeQuestion);
+const activeDailyCodingChallengeQuestionZodType = z.object({
+  date: z
+    .string()
+    .trim()
+    .regex(/^\d{4}-\d{2}-\d{2}$/),
+  question: questionZodType,
+});
 
 export type ActiveDailyCodingChallengeQuestion = z.infer<
   typeof activeDailyCodingChallengeQuestionZodType
 >;
 
 export async function fetchActiveDailyCodingChallengeQuestionWithoutDateValidation(): Promise<ActiveDailyCodingChallengeQuestion> {
   // TODO: have a way to omit variables when there aren't any
-  const data = await fetchGraphQL({});
+  const { activeDailyCodingChallengeQuestion } = await fetchGraphQL({});
 
-  return activeDailyCodingChallengeQuestionZodType.parse(data);
+  return activeDailyCodingChallengeQuestionZodType.parse(
+    activeDailyCodingChallengeQuestion,
+  );
 }
 
 export async function fetchActiveDailyCodingChallengeQuestionWithDateValidation({

workspaces/leetcode-api/src/api/active-daily-coding-challenge-question/main.ts

@@ -18,12 +18,10 @@ export type QuestionListQuestion = z.infer<typeof questionZodType>;
 
 const questionListZodType = z
   .object({
-    questionList: z.object({
-      data: z.array(questionZodType),
-      totalNum: z.number().int().nonnegative(),
-    }),
+    data: z.array(questionZodType),
+    totalNum: z.number().int().nonnegative(),
   })
-  .transform(({ questionList: { data, totalNum } }) => ({
+  .transform(({ data, totalNum }) => ({
     questions: data,
     totalNum,
   }));
@@ -52,12 +50,12 @@ export async function fetchQuestionList({
   limit: number;
   skip: number;
 }): Promise<QuestionList> {
-  const data = await fetchGraphQL({
+  const { questionList } = await fetchGraphQL({
     categorySlug,
     filters,
     limit,
     skip,
   });
 
-  return questionListZodType.parse(data);
+  return questionListZodType.parse(questionList);
 }