Question about setting up ENV variables

[danielmahon]

From email:

"Having some fun with your starter. Wanted to make sure I was using graphcms correctly. I'm on step 4 and I don’t think I'm doing adding is correctly."

I would start by checking your gatsby-config.js file and make sure you are passing the correct variables, should look something like this:

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

module.exports = {
  siteMetadata: {
    title: 'Gatsby Starter Procyon',
    shortName: 'Procyon',
    description:
      'An opinionated Gatsby starter designed for trash-eating pandas.',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    {
      resolve: 'gatsby-source-graphcms',
      options: {
        endpoint: process.env.GATSBY_GRAPHQLCMS_ENDPOINT,
        token: process.env.GATSBY_GRAPHQLCMS_TOKEN,
        // Get all remote data
        query: `{
          allPosts {
            id
            slug
            title
            content
            dateAndTime
            coverImage {
              handle
            }
          }
          allAuthors {
            id
            name
            bibliography
            avatar {
              handle
            }
          }
        }`,
      },
    },
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        get name() {
          return module.exports.siteMetadata.title;
        },
        get short_name() {
          return module.exports.siteMetadata.shortName;
        },
        start_url: '/',
        background_color: '#fafafa',
        theme_color: '#212121',
        display: 'minimal-ui',
        icon: 'src/images/icon.png',
      },
    },
    'gatsby-plugin-offline',
    'gatsby-plugin-react-next',
    'gatsby-plugin-netlify',
  ],
};

Notice how you need to import that variables first with:

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

The browser will have access to ANY env variable prefixed with GATSBY_. But you need to explicitly import them into gatsby-config.js

Also your .env.development file should look similar to the following:

GATSBY_GRAPHQLCMS_ENDPOINT="https://api.graphcms.com/simple/v1/your-project"
GATSBY_GRAPHQLCMS_TOKEN="euidy03gd93..."

[sdmccloskey]

That worked! Thanks.