Unable to "Execute Query" => .env variables are undefined

[mvaivre]

Actual Behavior

Here is my config file:

require("dotenv").config()

module.exports = {
  schema: {
    [`${process.env.REACT_APP_HASURA_HOST_NAME}:${process.env.REACT_APP_HASURA_PORT}/v1/graphql`]: {
      headers: {
        'x-hasura-admin-secret': process.env.REACT_APP_HASURA_SECRET
      }
    }
  },
  documents: ["src/api/*.graphql"],
  extensions: {
    endpoints: {
      default: {
        url: `${process.env.REACT_APP_HASURA_HOST_NAME}:${process.env.REACT_APP_HASURA_PORT}/v1/graphql`,
        headers: {
          'x-hasura-admin-secret': process.env.REACT_APP_HASURA_SECRET
        }
      }
    },
    codegen: {
      overwrite: true,
      generates: {
        "src/api/index.ts": {
          plugins: ["typescript", "typescript-operations", "typescript-react-apollo"],
          config: {
            withHooks: true,
            apolloReactHooksImportFrom: "@apollo/client"
          }
        },
        "./graphql.schema.json": {
          plugins: ["introspection"]
        }
      }
    }
  }
}

The extension seems able to properly connect to my remote schema (autocomplete is working), BUT the "execute query" function is not working. Here's the log:

NetworkHelper: operation: query
NetworkHelper: endpoint: undefined:undefined/v1/graphql

It seems like the env variables are not applied when using the Execute Query function.

Expected Behavior

The Execute Query function should work. The .env file should be read properly to allow for the remote schema URL in my example to be correct.

Steps to Reproduce the Problem Or Description

Simply use env variables (contained in a .env file at the root of your project) to define your remote schema URL, then use the Execute Query function.

Specifications

• GraphQL for VSCode Extension Version: 0.3.15
• VSCode Version: 1.53.2
• OS Name: Mac OS
• OS Version: Catalina

Logs Of TS Server || GraphQL Language Service

NetworkHelper: operation: query
NetworkHelper: endpoint: undefined:undefined/v1/graphql

[ghry5]

It seems like dotenv is not looking in the correct directory for the .env files. Passing a path to dotenvs config seems to work:

require("dotenv").config({
  path: __dirname,
});

This will not however reflect any changes to the dotenv file without restarting vscode as the extension is a long running process and dotenv will only load the process.env variables once.

[coeing]

I have a similar use case where I like to read the API token from the .env file:

const dotenv = require("dotenv");

dotenv.config({
  path: __dirname,
});

const apiToken = process.env.BACKEND_API_TOKEN;
console.log(`Api token: ${apiToken}`);

module.exports = {
  schema: "./graphql.schema.json",
  documents: "src/**/*.{graphql,ts}",
  extensions: {
    endpoints: {
      default: {
        url: "http://localhost:4000/api",
        headers: {
          Authorization: `Bearer ${apiToken}`,
        },
      },
    },
  },
};

The Output of the GraphQL Language Server correctly logs the API token: Api token: 1234

But if I use the Execute Query command on one of my GraphQL operations, the API token is not send over to the server. If I put the API token directly inside the configuration (Authorization: "Bearer 1234"), it works fine, so it looks like an issue with the environment variables.

[johanjmoncada]

Facing the same issue as @coeing Has anyone have any news on this? Thanks!

[ThaDaVos]

Same issue here, would love to have this workable as I am using the extension in a laravel project which uses the .env file for configuration...

[acao]

you need to require your dotenv in your graphql config file for now. we will fix this issue soon once I come up with a proper fix.

[RKings]

@coeing

Had the same issue you have and fixed it by pointing to the env file directly require('dotenv').config({ path: __dirname + '/.env', });

[acao]

Yes, going to remove dotenv and update the docs for this solution, as it’s the best we can do until I have time to implement workspaces support

[acao]

Can someone open a PR to fix the docs for this? I won’t have time for a while. We never transitioned properly when upgrading to graphql config 3 which drops env variable includes. We added calls to dotenv() but it only works when your config is next to .env file.

Also see: maintainer needed notice