Plugin refuses to use `zod`

[shellscape]

Using the latest version of @graphql-codegen/cli and codegen.ts (as is now recommended by the docs rather than YAML) I cannot get this plugin to use zod. The plugin appears to ignore all configuration. Here's my config, it's nothing special:

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  schema: '/tmp/schema.graphql',
  documents: ['app/**/*.tsx', 'app/**/*.ts'],
  ignoreNoDocuments: true,
  generates: {
    './app/gql/': {
      plugins: ['typescript-validation-schema'],
      config: { schema: 'zod' },
      preset: 'client'
    }
  }
};

export default config;

The plugin continues to generate code using yup and will not use zod.

[shellscape]

It looks like this plugin has an issue with the configuration format when codegen.ts is used. I modified the code in dist to log the config for the plugin, and this is what was logged:

{
  config: {
    inlineFragmentTypes: 'mask',
    scalars: undefined,
    defaultScalarType: undefined,
    strictScalars: undefined,
    namingConvention: undefined,
    useTypeImports: undefined,
    skipTypename: undefined,
    arrayInputCoercion: undefined,
    enumsAsTypes: undefined,
    dedupeFragments: undefined,
    nonOptionalTypename: undefined,
    avoidOptionals: undefined,
    documentMode: undefined
  }
}

So I updated the config like so:

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  schema: '/tmp/schema.graphql',
  documents: ['app/**/*.tsx', 'app/**/*.ts'],
  // for better experience with the watcher
  ignoreNoDocuments: true,
  generates: {
    './app/gql/': {
      plugins: ['typescript-validation-schema'],
      config: {
        scalarSchemas: {
          BigInt: 'z.bigint()',
          Datetime: 'z.string().datetime()',
          ID: 'z.string().uuid()',
          JSON: 'z.any()',
          UUID: 'z.string().uuid()'
        },
        schema: 'zod'
      },
      preset: 'client'
    }
  }
};

export default config;

And this is what was logged:

{
  config: {
    inlineFragmentTypes: 'mask',
    scalars: undefined,
    defaultScalarType: undefined,
    strictScalars: undefined,
    namingConvention: undefined,
    useTypeImports: undefined,
    skipTypename: undefined,
    arrayInputCoercion: undefined,
    enumsAsTypes: undefined,
    dedupeFragments: undefined,
    nonOptionalTypename: undefined,
    avoidOptionals: undefined,
    documentMode: undefined
  }
}

[shellscape]

Alright I figured out what the issue was; the plugin doesn't know to look at the general config for a generated file, and requires the config to be contextually under the plugin. Like so:

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  schema: '/tmp/schema.graphql',
  documents: ['app/**/*.tsx', 'app/**/*.ts'],
  // for better experience with the watcher
  ignoreNoDocuments: true,
  generates: {
    './app/gql/': {
      plugins: [
        {
          'typescript-validation-schema': {
            scalarSchemas: {
              BigInt: 'z.bigint()'
            },
            schema: 'zod'
          }
        }
      ],
      preset: 'client'
    }
  }
};

export default config;

This should be documented somewhere - I wasn't able to find a reference to resolve this issue in the repo.

Side question: @Code-Hex are up open to UX improvements with this plugin's console output? There are a few opportunities that I've run into.

[Code-Hex]

@shellscape I'd be happy if the output was cleaner but I don't have any ideas

[Code-Hex]

Handled in #1423. The README now shows the codegen.ts / client preset shape where this plugin config belongs, which was the confusing bit in this issue.