Getting Started With Gatsby.js - Part 4

In this tutorial, you will be Learning

• How to create Gatsby Source Plugin
• How to Use that Plugin in Your Application

Requirements

Node.js and NPM installed on your System Know basics of HTML, CSS and JavaScript, though not mandatory

Difficulty

Intermediate

Tutorial Contents

How to create Gatsby Source Plugin

Gatsby's Source plugins are the medium where you can get the data from the remote location (i.e. through the API) or from your local system (i.e. file system).

Gatsby Source Plugin is very similar to an NPM package where you need to publish that in NPM. Likewise we will have a package.json file which will have the information about your Plugin along with the dependencies.

For Example a typical package.json looks like below where you have the name, version, description, scripts if any, author, license and the dependencies. The dependencies are nothing but all the details of the packages I am using for this Plugin.

{
  "name": "gatsby-source-myplugin",
  "version": "0.0.1",
  "description": "My Source Plugin",
  "main": "gatsby-node.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Coding Defined <codingdefined@gmail.com> (http://www.codingdefined.com)",
  "license": "MIT",
  "dependencies": {
    "utopian-api": "^0.4.1"
  }
}

As you can see above I main file as gatsby-node.js where all teh code for this plugin will be going. Here we will have two main Nodes

a. sourceNodes, b. createNode

1 - You will be exporting the sourceNodes, so that any Gatsby app calling your plugin can consume it. So your gatsby-node.js will start with something like below.

exports.sourceNodes = async ({ boundActionCreators }) => {
    return;
};

2 - Now the createNode is used to create a new node which will have below properties

• id - The id of the node
• parent - The id of the parent node
• children - Its an array which contains id of all teh children node
• internal - Internal is an object where we have mediaType, type, content, and contentDigest. MediaType gives a sense to the transformer plugin (if used) that the content can be transformed or not. Type is used to query all the posts for the plugin in GraphQL. Content is the content of the node and contentDigest is the digest for the content.

So since we know about sourceNodes and createNode it will be dead simple to create your Gatsby Source Plugin. Lets create a single node first, for example if I get a post which has id and the content, what I am going to do is to write a createNode function and add parent, children, internal to it as shown below.

createNode({
  ...post,
  id: `${post.id}`,
  parent: "root",
  children: [],
  internal: {
    type: 'MyPost',
    content: nodeStr,
    contentDigest: nodeHash,
  },
});

The "post" in teh first line is the full post, id is the id of the post. Since I do not need any parent for this post I will assign "root", children also is empty. The type of the post is "MyPost" that means if I use GraphiQL I can use it as AllMyPost to get all the nodes. Now content is the post itself, for that I first stringify the post as shown below, and assign the nodeStr to the content.

const nodeStr = JSON.stringify(post);

Next is to specify the digest for the content using contentDigest. For that first we have to have crypto in your file using const crypto = require('crypto');. Next we will be creating a md5 hash and then update the nodeStr (i.e. the stringify post of ours) with it and then create a digest in hex as shown below

const nodeHash = crypto
     .createHash('md5')
     .update(nodeStr)
     .digest('hex');

Lets say we get 10 posts as an array of object so we will be going through it one by one and then creating the node for each one of them as shown below

posts.forEach(post => {
  const nodeStr = JSON.stringify(post);
  const nodeHash = crypto
    .createHash('md5')
    .update(nodeStr)
    .digest('hex');

  createNode({
   ...post,
     id: `${post.id}`,
     parent: "root",
     children: [],
     internal: {
       type: 'MyPost',
       content: nodeStr,
       contentDigest: nodeHash,
     },
  });
});

Now the full code should be inside our sourceNodes, thus our full code looks like below

const crypto = require('crypto');

exports.sourceNodes = async ({ boundActionCreators }) => {
  const { createNode } = boundActionCreators;
  return posts.forEach(post => {
           const nodeStr = JSON.stringify(post);
           const nodeHash = crypto
                   .createHash('md5')
                   .update(nodeStr)
                   .digest('hex');

           createNode({
             ...post,
             id: `${post.id}`,
             parent: "root",
             children: [],
             internal: {
                type: 'MyPost',
                content: nodeStr,
                contentDigest: nodeHash,
             },
           });
  });
};

How to Use that Plugin in Your Application

At first we need to add our newly constructed plugin in the gatsby-config.js file as shown below

module.exports = {
  plugins: [{resolve: 'gatsby-source-myplugin'}],
};

And then to get the data to our app, we need to add a qraphQl query as shown bwlow

export const query = graphql`
  query IndexQuery {
      allMyPost {
        edges {
          node {
            id
          }
        }
      }
  }
`;

And next is to use it, where we are iterating over the data and get the id of the node

{data.allMyPost.edges.map(({ node }) => (
  <div>
    {node.id}
  </div>
))}

Curriculum

• Getting Started With Gatsby.js - Part 1
• Getting Started With Gatsby.js - Part 2
• Getting Started With Gatsby.js - Part 3