danielwaltz / vite-plugin-graphql-codegen

Zero-config vite plugin that uses the vite file watcher to run graphql codegen programmatically without needing to start a separate watcher
https://www.npmjs.com/package/vite-plugin-graphql-codegen
MIT License
82 stars 7 forks source link

Support graphql-config type #26

Open deathemperor opened 10 months ago

deathemperor commented 10 months ago

I'm using this plugin with https://the-guild.dev/graphql/config/docs. although the type causes TS error, it works:

error

Argument of type 'IGraphQLConfig' is not assignable to parameter of type 'Options | undefined'.
  Type 'IGraphQLProject' has no properties in common with type 'Options'.ts(2345)

sample of graphql-config

import type { IGraphQLConfig } from "graphql-config";

const codegenConfig: IGraphQLConfig = {
  schema,
  documents: ["src/**/!(*.generated).{tsx,ts,graphql,gql}", "!src/sdk/**/*", "!node_modules"],
  extensions: {
    languageService: {
      cacheSchemaFileForLookup: true,
    },
    codegen: {
      overwrite: true,
      watch: CODEGEN_WATCH === "true",
      ignoreFieldConflicts: true,
      generates: {
        "src/sdk/gql/types.ts": {
          config: {
            ...config,
          },
          plugins: [
            "typescript",
          ],
        },
        "src/": {
          preset: "near-operation-file",
          presetConfig: {
            extension: ".generated.ts",
            baseTypesPath: "sdk/gql/types.ts",
          },
          plugins: [
            "typescript-operations",
            "typed-document-node",
            {
              add: {
                content: `/* eslint-disable */`,
              },
            },
          ],
        },
      },
    },
  },
};

export default codegenConfig;
danielwaltz commented 10 months ago

Ah, that's interesting! I think it's because the type for the plugin only expects a codegen config type, but doesn't also allow the more generic graphql config type.

I can look into adding the option to pass a more generic graphql config as well! I'm not sure if there are consequences in doing that, but I'll try it out and see what I can find.

If it works in the meantime, are you able to restructure your config so that the schema/documents are inside of the codegen config itself instead, sorta like this? Then maybe there's another way to actually set languageService.cacheSchemaFileForLookup like you are doing.

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

const codegenConfig: CodegenConfig = {
  overwrite: true,
  schema,
  documents: [
    'src/**/!(*.generated).{tsx,ts,graphql,gql}',
    '!src/sdk/**/*',
    '!node_modules',
  ],
  watch: CODEGEN_WATCH === 'true',
  ignoreFieldConflicts: true,
  generates: {
    'src/sdk/gql/types.ts': {
      config: {
        ...config,
      },
      plugins: ['typescript'],
    },
    'src/': {
      preset: 'near-operation-file',
      presetConfig: {
        extension: '.generated.ts',
        baseTypesPath: 'sdk/gql/types.ts',
      },
      plugins: [
        'typescript-operations',
        'typed-document-node',
        {
          add: {
            content: `/* eslint-disable */`,
          },
        },
      ],
    },
  },
};

export default codegenConfig;

Another option may be using a dedicated file for the graphql config, and referencing that file instead in the plugin options like this:

import codegen from 'vite-plugin-graphql-codegen';

codegen({ configFilePathOverride: 'path/to/graphql.config.yml' })
deathemperor commented 10 months ago

Not sure what you meant with option 1 but I'm using option 2 anyways due to some schema overrides that only works with codegen but not vscode and it works great except I have to load the config fire myself.