Gatsby Source Maavee Database

A minimal source plugin to source specific ‘Brand’ data for the Maavee e-commerce store.

A minimal boilerplate for the essential files Gatsby looks for in a plugin.

Built from gatsby-starter-plugin

Usage

1. Install npm package.

npm i @weareenvoy/gatsby-source-mvdb

2. 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-mvdb',
			options: {
				api_base_url: process.env.MV_DB_URL,
				token: process.env.MV_DB_TOKEN,
			},
		},
  ],
}

Sample .env file

MV_DB_URL="XXX"
MV_DB_TOKEN="XXX"

3. 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-mvdb
...
BUILDING NODES FOR (X) BRANDS!
...

If the above was successful you will also see allBrand 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-mvdb.git
cd gatsby-source-mvdb
npm install

2. 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-mvdb') where you specify the path to the plugin root folder:

module.exports = {
  plugins: [
    // other gatsby plugins
    // ...
    {
			resolve: require.resolve(`../gatsby-source-mvdb`),
			options: {
				api_base_url: process.env.MV_DB_URL,
				token: process.env.MV_DB_TOKEN,
			},
		},
  ],
}

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.

api.js Makes REST call to the client provided URL where they store their Brand data.