是否可在codegen.yaml中使用@next/env替换环境变量？

可以使用@next/env替换dotenv完成codegen.yaml的变量注入，你遇到的SERVER_API_URL解析为undefined的问题，是@next/env的默认加载逻辑不符合node预加载规则导致的。

原因说明 #

@next/env没有提供默认的预加载入口，直接使用-r @next/env引入时，仅会导入模块本身，不会自动执行.env文件加载、变量解析、挂载到process.env的逻辑，因此codegen读取不到对应的环境变量。

解决方案 #

方案1：搭配自定义预加载脚本使用@next/env #

1. 在项目根目录新建预加载脚本load-next-env.js，内容如下：

const { loadEnvConfig } = require('@next/env');
// 传入项目根目录，自动加载对应环境的.env文件并完成变量展开
loadEnvConfig(process.cwd());

2. 修改codegen启动命令为：

graphql-codegen -r ./load-next-env.js --config codegen.yml

执行后即可正常读取到展开后的环境变量。

方案2：使用dotenv生态实现相同效果 #

如果你不想新增额外脚本，可以改用dotenv-expand搭配dotenv，其变量展开规则和@next/env完全一致，无需修改现有.env和codegen.yaml配置，直接修改启动命令即可：

graphql-codegen -r dotenv/config -r dotenv-expand/config --config codegen.yml

内容的提问来源于stack exchange，提问作者Martinn3