Gatsby: env vars not working on gatsby-config

[BernardA]

Description

Throwing error on gatsby develop or gatsby build, failing to access env variables, as follows:

   "gatsby-source-graphql" threw an error while running the sourceNodes lifecycle:

    gatsby-source-graphql requires either option `url` or `createLink` callback

    50 |   invariant(typeName && typeName.length > 0, `gatsby-source-graphql requires option \`typeName\` to be specified`);
    51 |   invariant(fieldName && fieldName.length > 0, `gatsby-source-graphql requires option \`fieldName\` to be specified`);
  > 52 |   invariant(url && url.length > 0 || createLink, `gatsby-source-graphql requires either option \`url\` or \`createLink\` callback`);
 |   ^
   53 |   let link;
   54 | 
   55 |   if (createLink) {

 File: node_modules/gatsby-source-graphql/gatsby-node.js:52:3

Steps to reproduce

Implementing .env vars as follows:

.env.development

 API_REST_URL=http://localhost/api
 API_GRAPHQL_URL=http://localhost/api/graphql
 API_HOST=http://localhost
 LOCAL_HOST=http://127.0.0.1:8000

.env.production

  API_REST_URL=https://example.com/api
  API_GRAPHQL_URL=https://example.com/api/graphql
  API_HOST=https://example.com
  LOCAL_HOST=https://mynetlify.netlify.com

gatsby-config.js

           {
        resolve: 'gatsby-source-graphql',
        options: {
            typeName: 'MYAPI',
            fieldName: 'myApi',
            url: process.env.API_GRAPHQL_URL,
        },
    },

run gatsby clean

run gatsby develop or gatsby build

Remarks:

It will work fine if I hard code the URL on gatsby-config.js

The env vars also work fine on the client side code, for instance const url =${process.env.LOCAL_HOST}/icons/icon-48x48.png`;

Expected result

Should access env vars.

Actual result

Throws error above.

Environment

System:
OS: macOS 10.15.4
CPU: (4) x64 Intel(R) Core(TM) i5-4570S CPU @ 2.90GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.16.0 - /usr/local/bin/node
npm: 6.13.4 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 80.0.3987.163
Safari: 13.1
npmPackages:
gatsby: ^2.20.7 => 2.20.7
gatsby-cli: ^2.6.4 => 2.8.30
gatsby-image: ^2.2.33 => 2.2.41
gatsby-link: ^2.2.24 => 2.2.29
gatsby-plugin-create-client-paths: ^2.1.17 => 2.1.22
gatsby-plugin-eslint: ^2.0.8 => 2.0.8
gatsby-plugin-manifest: ^2.3.3 => 2.3.3
gatsby-plugin-material-ui: ^2.1.6 => 2.1.6
gatsby-plugin-offline: ^3.0.22 => 3.0.35
gatsby-plugin-react-helmet: ^3.1.15 => 3.1.22
gatsby-plugin-sass: ^2.1.23 => 2.1.28
gatsby-plugin-sharp: ^2.5.3 => 2.5.3
gatsby-source-filesystem: ^2.1.38 => 2.1.48
gatsby-source-graphql: ^2.1.24 => 2.1.33
gatsby-transformer-sharp: ^2.4.2 => 2.4.2
npmGlobalPackages:
gatsby-cli: 2.8.29

[ascorbic]

Hi. .env files aren't automatically imported. Can you ensure that gatsby-config.js includes something like this at the top. If it does, then can you share the full gatsby-config please

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV || 'development'}`
})

[BernardA]

My bad, sorry. I failed to thoroughly read the docs.
Thanks for the prompt response, by the way.