Is there any way to use @next/env in codegen.yaml?

Question

I was wondering if there was a way to use @next/env to replace variables in codegen.yaml when i run yarn codegen:

graphql-codegen -r dotenv/config --config codegen.yml - this is codegen example to load dot env

graphql-codegen -r @next/env --config codegen.yml - this is what i want to achieve

When i call it, i get

${SERVER_API_URL}/graphql goes as undefined/graphql

My usecase is:

# .env
HOST=https
API_DOMAIN=example.com
SERVER_API_URL=$HOST://$API_DOMAIN

# codegen.yaml
schema: ${SERVER_API_URL}/graphql

---

Why use @next/env? it replaces variables in .env, i'm attaching documentation sample from next.js documentation:

Note: Next.js will automatically expand variables ($VAR) inside of your .env* files. This allows you to reference other secrets, like so:

# .env
HOSTNAME=localhost
PORT=8080
HOST=http://$HOSTNAME:$PORT

If you are trying to use a variable with a $ in the actual value, it needs to be escaped like so: \$.

For example:

# .env
A=abc

# becomes "preabc"
WRONG=pre$A

# becomes "pre$A"
CORRECT=pre\$A

source: https://nextjs.org/docs/basic-features/environment-variables#loading-environment-variables

Answer 1

You can't use @next/env directly via -r flag. However you still have couple of alternatives. For example, you can address the required .env file directly:

DOTENV_CONFIG_PATH=./.env.local graphql-codegen --config codegen.yml -r dotenv/config

If you still want to use @next/env, you can convert your codegen.yml to codegen.js and import @next/env. For example, my original YML:

overwrite: true
schema:
  - https://graphql.fauna.com/graphql:
      headers:
        Authorization: 'Bearer ${FAUNA_ADMIN_KEY}'
documents: null
generates:
  src/generated/graphql.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-graphql-request
  ./graphql.schema.json:
    plugins:
      - 'introspection'

I re-wrote it as JS:

const { loadEnvConfig } = require('@next/env')
loadEnvConfig(process.cwd())

module.exports = {
  overwrite: true,
  schema: {
    'https://graphql.fauna.com/graphql': {
      headers: {
        Authorization: `Bearer ${process.env.FAUNA_ADMIN_KEY}`,
      },
    },
  },
  documents: null,
  generates: {
    'src/generated/graphql.ts': {
      plugins: [
        'typescript',
        'typescript-operations',
        'typescript-graphql-request',
      ],
    },
    './graphql.schema.json': { plugins: ['introspection'] },
  },
}

and then generated the code using graphql-codegen --config codegen.js.

Here is an issue on Github that helped me.