UNDERSTANDING PLUGIN DEVELOPMENT IN GATSBY

Gatsby is a React-based static-site generator that has huge tools to create website and blogs. It use plugins to create custom functionality which is not available at the time of installation.

 

Here I will discuss about the topic like-

  • Types of Gatsby plugins
  • Different forms of Gatsby plugins
  • Create a comment plugin for Gatsby website

 

What Is A Gatsby Plugin?

 

Gatsby is a static-site generator which can be use at anywhere. Plugins helps to extend Gatsby with the feature which is not available in the box. We can create a manifest.json file for a progressive web app (PWA), embedding tweets on a page, logging page views, and much more by Plugins.

 

Types of Gatsby Plugins

 

There are two types:

 

i) local- It can be develop in the project directly

ii) external- available through npm or Yarn or may be linked in the same computer by yarn link or npm link command

 

Forms of Gatsby Plugins

 

There are three types of Plugins:

  • Source plugins: This provide sources of data for a Gatsby website.
  • Transformer plugins: This helps to transfer data from source to other plugins in most easy and expected form.
  • Generic plugins: It can do the things which is not done by other two plugins.

 

Components of A Gatsby Plugin

 

Some files are important to create Gatsby:

Building a Comment Plugin For Gatsby

For developing a Gatsby plugin you need to create comment plugin which is installable.

Serving And Loading Comments

We need to provide a server to saving and loading comments. It accept the following fields of the

  • body-content: [string]

Which give comment to itself,

  • author: [string]

The name of the author of the comments

  • website

The website that the comment is being posted from,

  • slug

It is for the comment.

Integrating the Server With Gatsby Using API Files

  • Initializing the folder

It is a command line interface. Then change it into plugin directory to open it in code
editor.

  • Installing axios for Network Requests

Axios package is installed to make web request.

  • Adding a New Node Type

A new node type is added to extend the comments.

  • Fetching Comments From the Comments Server

Axios is used to pull comments and store them to data layer.

  • Transforming Data (Comments)

To resolve comments on post we need an API.

  • Final Code for Comment Sourcing and Transforming

const axios = require(“axios”);

exports.sourceNodes = async (
{ actions, createNodeId, createContentDigest },
pluginOptions
) => {
const { createTypes } = actions;
const typeDefs = `
type CommentServer implements Node {
_id: String
author: String
string: String
website: String
content: String
slug: String
createdAt: Date
updatedAt: Date
}
`;
createTypes(typeDefs);

const { createNode } = actions;
const { limit, website } = pluginOptions;
const _limit = parseInt(limit || 10000); // FETCH ALL COMMENTS
const _website = website || “”;

const result = await axios({
url: `https://Gatsbyjs-comment-server.herokuapp.com/comments?limit=${_limit}&website=${_website}`,
});

const comments = result.data;

function convertCommentToNode(comment, { createContentDigest, createNode }) {
const nodeContent = JSON.stringify(comment);

const nodeMeta = {
id: createNodeId(`comments-${comment._id}`),
parent: null,
children: [],
internal: {
type: `CommentServer`,
mediaType: `text/html`,
content: nodeContent,
contentDigest: createContentDigest(comment),
},
};

const node = Object.assign({}, comment, nodeMeta);
createNode(node);
}

for (let i = 0; i < comments.data.length; i++) {
const comment = comments.data[i];
convertCommentToNode(comment, { createNode, createContentDigest });
}
};

exports.createResolvers = ({ createResolvers }) => {
const resolvers = {
MarkdownRemark: {
comments: {
type: [“CommentServer”],
resolve(source, args, context, info) {
return context.nodeModel.runQuery({
query: {
filter: {
website: { eq: source.fields.slug },
},
},
type: “CommentServer”,
firstOnly: false,
});
},
},
},
};
createResolvers(resolvers);
};

This is the final code .

Saving Comments as JSON File:

JSON File make possible to fetch data on demand.

Rendering Comments

  • Define the Root Container for HTML

We have to set HTML element to set the point in a page. It is expected to set every
page have HTML point.

  • Implement the Route Update API in the gatsby-browser.js File

Fetching file and component should be done when file is visited.

  • Create Helper That Creates HTML Elements

Define function need to create element in HTML.

  • Create Header of Comments Section

We need to add header in the comment component.

Posting a Comment

  • Post Comment Form Helper

We need to make post request for the end point of API.

  • Append the Post Comment Form

Appending a form can be done by the code.

// … helpers
exports.onRouteUpdate = async ({ location, prevLocation }, pluginOptions) => {
const commentContainer = document.getElementById(“commentContainer”)
if (commentContainer && location.path !== “/”) {
// insert header
// insert comment list
commentContainer.appendChild(createCommentForm())
}
}

Test the Plugin

Create a Gatsby Website

A Gatsby website is done by following coding
// PARENT
// ├── PLUGIN
// ├── Gatsby Website


gatsby new private-blog https://github.com/gatsbyjs/gatsby-starter-blog

Conclusion

In this article we explain how to create Gatsby plugin. Here we learn that Plugin uses different APIs file to provide comments in Gatsby website. We can save comments in JSON files. Plugin made this post in npm module and full code in GitHub.

We will be happy to answer your questions on designing, developing, and deploying comprehensive enterprise web, mobile apps and customized software solutions that best fit your organization needs.

As a reputed Software Solutions Developer we have expertise in providing dedicated remote and outsourced technical resources for software services at very nominal cost. Besides experts in full stacks We also build web solutions, mobile apps and work on system integration, performance enhancement, cloud migrations and big data analytics. Don’t hesitate to get in touch with us!

Leave a Reply

Your email address will not be published. Required fields are marked *