GraphQL codegen: Use codegen.ts (instead of codegen.yml)

[yasserlens]

This is a suggestion: I moved from codegen.yml to codegen.ts to be able to pass flags and use them to determine the graphQL API to call (local vs dev vs prod). See below (this pulls the shop API only)

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

const DEV_API = 'https://api-test.example.com/shop-api';
const PROD_API = 'https://api.example.com/shop-api';
const LOCAL_API = 'http://localhost:3000/shop-api';

const GRAPHQL_API = import.meta.env.IS_DEV ? DEV_API :
  import.meta.env.IS_LOCAL ? LOCAL_API : PROD_API;

const config: CodegenConfig = {
  schema: [
    GRAPHQL_API,
    'type Mutation { createStripePaymentIntent: String }'
  ],
  documents: [
    '"src/providers/shop/**/*.{ts,tsx}"',
    '!src/generated/*'
  ],
  generates: {
    'src/generated/graphql-shop.ts': {
      config: {
        enumsAsConst: true
      },
      plugins: [
        'typescript',
        'typescript-operations',
        'typescript-generic-sdk',
      ]
    },
    'src/generated/schema-shop.graphql': {
      plugins: ['schema-ast']
    }
  }
}

export default config

Then in package.json, I have different scripts, one for each environment, e.g.:

{
  ...
  scripts: {
    "generate-admin": "graphql-codegen --config codegen-admin.ts",
    "generate-shop": "graphql-codegen --config codegen-shop.ts",
    "generate-dev": "IS_DEV=TRUE && npm run generate-shop && npm run generate-admin",
    "generate-local": "IS_LOCAL=TRUE && npm run generate-shop && npm run generate-admin",
    "generate": "npm run generate-shop && npm run generate-admin",
  }
}

If you think converting .yml to .ts is better for everyone, I can create a pull request to merge it into main.

Thanks

[gioboa]

Yes please, go for it. Thanks for your suggestion

[yasserlens]

Here you go https://github.com/vendure-ecommerce/storefront-qwik-starter/pull/122

[gioboa]

Thanks for your great job!