Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

Elastic Path Source Plugin

A minimal source plugin for Elastic Path Commerce Cloud Product Content Management (PCM) services API.

The current gatsby-source-moltin seems to only support the Elastic Path legacy API.

Built from gatsby-starter-plugin


Background

Important: This currently (as of 4/12/2022) includes sourcing Elastic Path PCM Products only. Other resource types may be added in the future.

Usage

  1. Install npm package.
npm i @weareenvoy/gatsby-source-eppcm
  1. Update the gatsby-config.js of your gatsby project (where this plugin will be used) and include the plugin in the plugins array.:
cd path-to-some-gatsby-project
module.exports = {
  plugins: [
    // other gatsby plugins
    // ...
    {
			resolve: '@weareenvoy/gatsby-source-eppcm',
			options: {
				api_base_url: process.env.EP_API_BASE_URL,
				client_id: process.env.EP_CLIENT_ID,
				client_secret: process.env.EP_CLIENT_SECRET,
				grant_type: process.env.EP_GRANT_TYPE,
				catalog_id: process.env.EP_CATALOG_ID,
				draft_products: false,
				rate_limit_interval: 2000, // Optional
				rate_limit_tokens_per_interval: 25 // Optional
			},
		},
  ],
}

Sample .env file

EP_API_BASE_URL="https://useast.api.elasticpath.com"
EP_CLIENT_ID="XXX"
EP_CLIENT_SECRET="XXX"
EP_GRANT_TYPE="client_credentials"
EP_CATALOG_ID="XXX"
  1. Verify the plugin was added correctly

You can verify your plugin was added to your site correctly by running gatsby develop for the site.

You should now see a message logged to the console in the preinit phase of the Gatsby build process:

$ gatsby develop
...
Loaded gatsby-source-eppcm
...
BUILDING NODES FOR (X) PCM PRODUCTS!
...

If the above was successful you will also see allEpProduct in GraphiQL at http://localhost:8000/___graphql

Contributing

You may point your GatsbyJS project to a local copy of this plugin and test your updates. The usage is the same as described above with the difference of pointing to your local copy within your gatsby-config.js file.

  1. Clone (or download) the repo and install npm packages.
git clone git@github.com:weareenvoy/gatsby-source-eppcm.git
cd gatsby-source-eppcm
npm install
  1. Go to the project that will use this plugin and update gatsby-config.js to point to your local copy of the plugin. Notice the line require.resolve('<path-to>/gatsby-source-eppcm') where you specify the path to the plugin root folder:
module.exports = {
  plugins: [
    // other gatsby plugins
    // ...
    {
			resolve: require.resolve(`../gatsby-source-eppcm`),
			options: {
				api_base_url: process.env.EP_API_BASE_URL,
				client_id: process.env.EP_CLIENT_ID,
				client_secret: process.env.EP_CLIENT_SECRET,
				grant_type: process.env.EP_GRANT_TYPE,
				catalog_id: process.env.EP_CATALOG_ID,
				draft_products: false,
				rate_limit_interval: 2000, // Optional
				rate_limit_tokens_per_interval: 25 // Optional
			},
		},
  ],
}

Make sure you have the required .env variables as described in the Usage section.

Directory Structure

The main files being used are as follows:

gatsby-node.js Implements Gatsby sourceNodes API and calls functions in the next file, which handles the API calls.

ep-api.js Makes REST calls to Elastic Path Commerce Cloud using the config data set in the pluginOptions.

rateLimiterUtil.js Utility functions used to execute rate limited API calls.

util.js General utility helpers.

Testing your contributions

Since it’s cumbersome to have to include this plugin in another project in order to see if your updates worked, the below file has been added so you can run some of your functions local to this project via node.

test.js Add any calls and functions that you can use to test new features. Then from this projects root run:

node test.js

Note: You will have to add an .env file to this projects root with the relevant values since there will not be any pluginOptions.

© 2024 Gatsby, Inc.