Gatsby url to call into different page apart from GAtsby-config

By default, environment variables are only available in Node.js code and are not available in the browser as some variables should be kept secret and not exposed to anyone visiting the site.

To expose a variable in the browser, you must preface its name with GATSBY_. So GATSBY_API_URL will be available in browser code but API_KEY will not.

1. Make sure you have the necessary dependencies installed. You may need to install packages related to environment variables and Gatsby.

   bash
   npm install dotenv
   

   If you haven't installed Gatsby CLI globally, you can do so with:

   bash
   npm install -g gatsby-cli
   

2. Configure Environment Variables: Create a .env file in your Gatsby project's root directory and define your environment variables:

   dotenv
   DRUPAL_ENDPOINT=https://example.com/api/${DRUPAL_API_VERSION}
   DRUPAL_API_VERSION=v1
   

3. Modify gatsby-config.js: Update your gatsby-config.js file to include the code snippet you provided. Additionally, load environment variables using dotenv.

   javascript
   // gatsby-config.js
   require('dotenv').config();
   
   process.env.DRUPAL_ENDPOINT = process.env.DRUPAL_ENDPOINT.replace(
     /\${(.+?)}/g,
     (match, p1) => process.env[p1]
   );
   
   module.exports = {
     // Your Gatsby configuration goes here
   };