Invalid Codegen Configuration when using environment variable with Nextjs

[ashishch-98]

Description

I have a Nextjs 13 setup in which I am trying to access the GraphQL schema environment variable from env.local in the codegen.ts file but get the following error

codegen.ts

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

const config: CodegenConfig = {
  overwrite: true,
  schema: process.env.GRAPHQL_ENDPOINT,
  documents: "graphql/queries/**/*.{gql,graphql}",
  debug: true,
  ignoreNoDocuments: true,
  watch: true,
  generates: {
    "graphql/generated/graphql.tsx": {
      plugins: [
        "typescript",
        "typescript-operations",
        "typescript-react-apollo"
      ]
    }
  }
};

export default config;

env.local

GRAPHQL_ENDPOINT="http://localhost/graphql"

package.json

{
  "name": "project",
  "version": "2.0.0",
  "private": true,
  "scripts": {
    "predev": "npm run generate",
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "generate": "graphql-codegen --require dotenv/config"
  },
  "dependencies": {
    "@apollo/client": "^3.7.1",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@types/node": "18.11.9",
    "@types/react": "18.0.25",
    "@types/react-dom": "18.0.9",
    "eslint": "8.27.0",
    "eslint-config-next": "13.0.3",
    "graphql": "^16.6.0",
    "next": "13.0.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.6.0",
    "typescript": "4.8.4"
  },
  "devDependencies": {
    "@graphql-codegen/cli": "2.13.12",
    "@graphql-codegen/client-preset": "1.1.5",
    "@graphql-codegen/typescript": "^2.8.2",
    "@graphql-codegen/typescript-operations": "^2.5.7",
    "@graphql-codegen/typescript-react-apollo": "^3.3.6",
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.19",
    "tailwindcss": "^3.2.4"
  }
}

[charlypoly]

Hi @ashishch-98,

To get value from your process global, please setup dotenv, as follow:

import * as dotenv from 'dotenv' // see https://github.com/motdotla/dotenv#how-do-i-use-dotenv-with-import
dotenv.config()

const config: CodegenConfig = {
  overwrite: true,
  schema: process.env.GRAPHQL_ENDPOINT,
  documents: "graphql/queries/**/*.{gql,graphql}",
  debug: true,
  ignoreNoDocuments: true,
  watch: true,
  generates: {
    "graphql/generated/graphql.tsx": {
      plugins: [
        "typescript",
        "typescript-operations",
        "typescript-react-apollo"
      ]
    }
  }
};

export default config;

[ashishch-98]

Thanks, @charlypoly even after adding the import for dotenv I'm still getting the same error.

[charlypoly]

could you run codegen in verbose mode (by adding the -v CLI flag) and share the output here?

Thank you

[ashishch-98]

[charlypoly]

it seems that process.env.GRAPHQL_ENDPOINT is empty, could you console.log() it from codegen.ts?

[ashishch-98]

Yes, you were right the variable was undefined in codegen.ts. I renamed .env.local to .env and it is accessible now without any dotenv config.

[ashishch-98]

Renaming .env.local to .env resolved the issue for me.