feat(package/cli): upgrade graphql-codegen (#1634)

Author: vicary

.changeset/fluffy-colts-confess.md

@@ -0,0 +1,5 @@
+---
+'@gqty/cli': major
+---
+
+feat(package/cli): upgrade @graphql-codegen/typescript to v4

.github/workflows/release.yaml

@@ -9,6 +9,7 @@ on:
       - '.husky/**'
     branches:
       - main
+
 jobs:
   release:
     name: Release

examples/react/package.json

@@ -32,7 +32,7 @@
     "framer-motion": "^6.5.1",
     "gqty": "workspace:^",
     "graphql": "^16.6.0",
-    "graphql-ez": "^0.16.0",
+    "graphql-ez": "^0.16.1",
     "graphql-upload": "^13.0.0",
     "ms": "^2.1.3",
     "next": "^12.3.4",

internal/test-utils/package.json

@@ -40,7 +40,7 @@
     "cross-env": "^7.0.3",
     "fastify": "^4.26.2",
     "graphql": "^16.6.0",
-    "graphql-ez": "^0.16.0",
+    "graphql-ez": "^0.16.1",
     "jest": "^29.5.0",
     "jest-watch-typeahead": "^2.2.2",
     "randomstring": "^1.2.3",

packages/cli/package.json

@@ -42,43 +42,39 @@
     "postpublish": "gh-release",
     "test": "jest",
     "test:watch": "jest --watch",
-    "test:watch-coverage": "rimraf coverage && mkdirp coverage/lcov-report && concurrently --raw \"jest --watchAll\" \"serve -l 8787 coverage/lcov-report\" \"wait-on tcp:8787 coverage/lcov-report/index.html && open-cli http://localhost:8787\""
+    "test:watch-coverage": "rimraf coverage && mkdir -p coverage/lcov-report && concurrently --raw \"jest --watchAll\" \"serve -l 8787 coverage/lcov-report\" \"wait-on tcp:8787 coverage/lcov-report/index.html && open-cli http://localhost:8787\""
   },
   "dependencies": {
-    "@graphql-codegen/core": "^3.1.0",
-    "@graphql-codegen/typescript": "^3.0.4",
-    "@graphql-tools/delegate": "^9.0.35",
-    "@graphql-tools/utils": "^9.2.1",
-    "@graphql-tools/wrap": "^9.4.2",
+    "@graphql-codegen/core": "^4.0.2",
+    "@graphql-codegen/typescript": "^4.0.6",
+    "@graphql-tools/delegate": "^10.0.4",
+    "@graphql-tools/utils": "^10.1.3",
+    "@graphql-tools/wrap": "^10.0.5",
+    "@inquirer/prompts": "^5.0.1",
     "chalk": "^5.2.0",
     "commander": "^11.0.0",
-    "cosmiconfig": "^8.1.3",
-    "cross-fetch": "^3.1.5",
+    "cosmiconfig": "^9.0.0",
+    "cross-fetch": "^4.0.0",
     "fast-glob": "^3.2.12",
     "gqty": "workspace:^",
     "graphql": "^16.0.0",
-    "inquirer": "^8.2.5",
     "lodash-es": "^4.17.21",
     "micromatch": "^4.0.5",
-    "mkdirp": "^2.1.5",
     "prettier": "^2.8.6",
-    "trading-signals": "^3.7.0"
+    "trading-signals": "^5.0.1"
   },
   "devDependencies": {
-    "@size-limit/preset-small-lib": "^8.2.6",
-    "@types/inquirer": "^8.2.6",
+    "@size-limit/preset-small-lib": "^11.1.2",
     "@types/lodash-es": "^4.17.12",
     "@types/micromatch": "^4.0.7",
-    "@types/mkdirp": "^1.0.2",
-    "@types/ms": "^0.7.31",
     "@types/node": "^18.15.5",
     "bob-tsm": "^1.1.2",
     "esbuild": "^0.17.12",
     "open-cli": "^7.2.0",
     "p-lazy": "^3.1.0",
     "rimraf": "^4.4.0",
     "serve": "^14.2.0",
-    "size-limit": "^8.2.4",
+    "size-limit": "^11.1.2",
     "test-utils": "workspace:^",
     "tmp-promise": "^3.0.3",
     "wait-on": "^7.0.1"

packages/cli/src/commands/default.ts

@@ -181,7 +181,7 @@ export const addCommand = (command: Command) => {
       // Watch mode
       if (options.watch) {
         const { printSchema } = await import('graphql');
-        const { FasterSMA: SMA } = await import('trading-signals');
+        const { FasterSMA: SMA } = await import('trading-signals/dist/SMA/SMA');
         const { default: throttle } = await import('lodash-es/throttle.js');
         const {
           default: { isMatch },
@@ -292,9 +292,7 @@ export const addCommand = (command: Command) => {
 };
 
 const promptEndpoints = async (defaultEndpoint?: string) => {
-  const { endpoints } = await inquirer.prompt<{ endpoints: string }>({
-    name: 'endpoints',
-    type: 'input',
+  const endpoints = await inquirer.input({
     message: 'Where is your GraphQL endpoint or schema files?',
     default: defaultEndpoint,
   });
@@ -306,9 +304,7 @@ const promptEndpoints = async (defaultEndpoint?: string) => {
 };
 
 const promptTarget = async (defaultTarget: string) => {
-  const { target } = await inquirer.prompt<{ target: string }>({
-    name: 'target',
-    type: 'input',
+  const target = await inquirer.input({
     message: 'Where should the client be generated?',
     default: defaultTarget,
   });
@@ -317,9 +313,7 @@ const promptTarget = async (defaultTarget: string) => {
 };
 
 const promptReact = async (defaultValue: boolean) => {
-  const { react } = await inquirer.prompt<{ react: boolean }>({
-    name: 'react',
-    type: 'confirm',
+  const react = await inquirer.confirm({
     message: 'Are you using React with GQty?',
     default: defaultValue,
   });
@@ -328,9 +322,7 @@ const promptReact = async (defaultValue: boolean) => {
 };
 
 const promptSubscriptions = async (defaultValue?: string) => {
-  const { subscriptions } = await inquirer.prompt<{ subscriptions: string }>({
-    name: 'subscriptions',
-    type: 'input',
+  const subscriptions = await inquirer.input({
     message: 'Do you need a subscription client? (Enter "-" to skip)',
     default: defaultValue?.trim() || undefined,
   });
@@ -339,9 +331,7 @@ const promptSubscriptions = async (defaultValue?: string) => {
 };
 
 const promptTypescript = async (defaultValue: boolean) => {
-  const { typescript } = await inquirer.prompt<{ typescript: boolean }>({
-    name: 'typescript',
-    type: 'confirm',
+  const typescript = await inquirer.confirm({
     message: 'Do you want a TypeScript client over vanilla.js?',
     default: defaultValue,
   });

packages/cli/src/commands/default/fetchSchema.ts

@@ -174,9 +174,7 @@ const fetchSchema = async (
 const promptHeaders = async () => {
   if (!process.stdin.isTTY) return;
 
-  const { headers } = await deps.inquirer.prompt<{ headers: string }>({
-    name: 'headers',
-    type: 'input',
+  const headers = await deps.inquirer.input({
     message: `Any request headers? (Authorization: Bearer <token>, X-Foo: <bar>)`,
   });
 

packages/cli/src/commands/default/generateClient.ts

@@ -49,9 +49,7 @@ export const generateClient = async (
 };
 
 const promptRegenerate = async (message: string): Promise<boolean> => {
-  const { regenerate } = await inquirer.prompt<{ regenerate: boolean }>({
-    type: 'confirm',
-    name: 'regenerate',
+  const regenerate = await inquirer.confirm({
     message,
     default: false,
   });

packages/cli/src/commands/default/promptInstall.ts

@@ -11,9 +11,7 @@ export const promptInstall = async (configuration: GQtyConfig) => {
   const command = getUserPackageManager() ?? 'npm';
   const args = getInstallCommand(command).concat(packages);
 
-  const { install } = await inquirer.prompt<{ install: boolean }>({
-    type: 'confirm',
-    name: 'install',
+  const install = await inquirer.confirm({
     message: `Do you want us to run "${command} ${args[0]}" for you?`,
     default: true,
   });

packages/cli/src/deps.ts

@@ -2,12 +2,11 @@ export { codegen } from '@graphql-codegen/core';
 export * as typescriptPlugin from '@graphql-codegen/typescript';
 export { printSchemaWithDirectives } from '@graphql-tools/utils';
 export { schemaFromExecutor, wrapSchema } from '@graphql-tools/wrap';
+export * as inquirer from '@inquirer/prompts';
 export { program } from 'commander';
 export { cosmiconfig, type Loader } from 'cosmiconfig';
 export { fetch } from 'cross-fetch';
 export { default as fg } from 'fast-glob';
 export { buildSchema, printSchema } from 'graphql';
-export { default as inquirer } from 'inquirer';
 export { default as sortBy } from 'lodash-es/sortBy.js';
-export { default as mkdirp } from 'mkdirp';
 export { default as prettier, type Options as PrettierOptions } from 'prettier';

packages/cli/src/generate.ts

@@ -53,7 +53,10 @@ export interface GenerateOptions {
    * }
    * ```
    */
-  scalarTypes?: Record<string, string>;
+  scalarTypes?: Exclude<
+    deps.typescriptPlugin.TypeScriptPluginConfig['scalars'],
+    string
+  >;
   /**
    * Prepend code to the schema file, useful with the `scalarTypes` option.
    */
@@ -177,7 +180,7 @@ export async function generate(
 
   const codegenResultPromise = deps.codegen({
     schema: parse(deps.printSchemaWithDirectives(schema)),
-    config: {} as deps.typescriptPlugin.TypeScriptPluginConfig,
+    config: {} satisfies deps.typescriptPlugin.TypeScriptPluginConfig,
     documents: [],
     filename: 'gqty.generated.ts',
     pluginMap: {
@@ -186,14 +189,15 @@ export async function generate(
     plugins: [
       {
         typescript: {
+          constEnums: true,
           onlyOperationTypes: true,
           declarationKind: 'interface',
           addUnderscoreToArgsType: true,
           scalars: scalarTypes,
           namingConvention: 'keep',
           enumsAsTypes: enumsAsStrings,
           enumsAsConst: enumsAsConst,
-        } as deps.typescriptPlugin.TypeScriptPluginConfig,
+        } satisfies deps.typescriptPlugin.TypeScriptPluginConfig,
       },
     ],
   });
@@ -578,7 +582,7 @@ export async function generate(
       scalarsEnumsHash[pureType]
         ? enumsNames.includes(pureType)
           ? pureType
-          : `Scalars["${pureType}"]`
+          : `ScalarsEnums["${pureType}"]`
         : pureType,
     ];
 
@@ -754,13 +758,13 @@ export async function generate(
       subscription: Subscription
     }
 
-    export type MakeNullable<T> = {
-      [K in keyof T]: T[K] | undefined;
-    };
-
-    export interface ScalarsEnums extends MakeNullable<Scalars> {
+    export type ScalarsEnums = {
+      [Key in keyof Scalars]: Scalars[Key] extends { output: unknown }
+        ? Scalars[Key]['output']
+        : never;
+    } & {
       ${deps.sortBy(enumsNames).reduce((acum, enumName) => {
-        acum += `${enumName}: ${enumName} | undefined;`;
+        acum += `${enumName}: ${enumName};`;
         return acum;
       }, '')}
     }

packages/cli/src/writeGenerate.ts

@@ -2,7 +2,6 @@ import { existsSync, promises } from 'fs';
 import { type GraphQLSchema } from 'graphql';
 import { dirname, resolve } from 'path';
 import { defaultConfig, type GQtyConfig } from './config';
-import * as deps from './deps.js';
 import { generate, type TransformSchemaOptions } from './generate';
 
 export type OnExistingFileConflict =
@@ -128,7 +127,7 @@ export async function writeGenerate(
 
   const [{ clientCode, schemaCode, javascriptSchemaCode }] = await Promise.all([
     generate(schema, configuration, transformsGenerate),
-    deps.mkdirp(dirname(destinationPath)),
+    promises.mkdir(dirname(destinationPath), { recursive: true }),
   ]);
 
   await Promise.all([