Generate Zod types from the GraphQL schema TypeScript types!

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/main.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/question-list/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);
 }