@graphql-codegenの環境変数の設定方法

前提使用技術

• Next.js
• typescript
• apollo-chlient
• @graphql-codegen-cli

codegen.yml

overwrite: true

schema:
  - "ここにエンドポイント":
      headers:
        "X-Shopify-Storefront-Access-Token": ${NEXT_PUBLIC_STORE_FRONT_ACCESS_TOKEN}

documents: "src/queries/**/*.ts"
generates:
  src/types/generated/graphql.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"

.env

NEXT_PUBLIC_STORE_FRONT_ACCESS_TOKEN="ここにアクセストークンやAPIKEY"

今回はショッピファイ のトークンを想定してました。
headersは自分のアクセスしたいAPIのものを設定します。

.envファイルを読み込みにいくには${}で囲みます。
注意しなくてはいけないのはprocess.envを通常つけるはずですが、この場合は付けなくて良いことです。

package.json

"scripts": {
    "gen-types": "graphql-codegen --require dotenv/config --config codegen.yml"
  }

package.jsonにscriptsを追加します。
--require dotenv/configを設定すると実行時にデフォルトで.envファイルを読みにいきます。

注意点として.envファイルだけで.env.localなどのファイルは読みにいきません。
その場合は
https://www.graphql-code-generator.com/docs/getting-started/require-field
こちらに書いてあるので実践してみましょう！！

お疲れさまでした！