10 Must-Have Gatsby Plugins for DatoCMS

The Gatsby plugin library seemingly continues to grow as more and more organizations continue to make the shift towards headless technology. As of late, DatoCMS is emerging as a popular headless CMS solution for teams looking to leverage its convincing user experience, collaborative editing, and asset management capabilities.

Now, more teams are leaning towards the Gatsby-DatoCMS duo, which explains why Gatsby has added more plugins to their library. This article will walk you through ten must-have Gatsby-DatoCMS plugins that will improve the developer experience and make the life of content editors easier.

10 Gatsby-DatoCMS Plugins

1. gatsby-source-datocms

Source plugin is used for pulling models and records into Gatsby from DatoCMS administrative areas. It creates links between records so they can be queried in Gatsby using GraphQL.

How to install:

To install this plugin, run the script:

npm install --save gatsby-source-datocms gatsby-plugin-image

2. gatsby-remark-images-datocms

This plugin processes images in markdown so they can be used in the production build using DatoCMS’s built-in CDN. In the processing, it makes images responsive by adding an elastic container to hold the size of the image while it loads to avoid layout jumps.

This plugin also generates multiple versions of images at different widths and sets the size of the image so regardless of the width of the device, the correct image is downloaded. It Converts GIF images into video elements and uses the “blur up” technique popularized by Medium and Facebook where a small 20px wide version of the image is shown as a placeholder until the actual image is downloaded.

How to install:

To install this plugin, run the script: npm install --save gatsby-remark-images-datocms

3. gatsby-plugin-offline

Adds drop-in support for making a Gatsby site work offline and more resistant to bad network connections. It uses Workbox Build to create a service worker for the site and loads the service worker into the client. If you’re using this plugin with gatsby-plugin-manifest, this plugin should be listed after that plugin so the manifest file can be included in the service worker. 

How to install:

To install this plugin, run the script: npm install gatsby-plugin-offline

4. Gatsby-transformer-inline-svg

This plugin enables the loading of SVGs as inline components when a GraphQL URL is provided. It retrieves the contents of your SVG files from Contentful and makes them available for manipulation and rendering using GraphQL.

The plugin optimizes the output, as exported SVG files typically contain a great deal of redundant information. It provides a compact data URI that compresses SVGs (that SVG-supporting browsers tolerate). Another cool feature of this plugin is that it makes it simple to download SVG and add it to the GraphQL schema of your website.

How to Install

To install this plugin, run the script: npm i gatsby-transformer-inline-svg

5. Gatsby-plugin-readingtime-contentful

This plugin is useful when you want to give your readers an estimate of how long it will take them to read a blog post or article. It can estimate the reading time for any content from any source in the GraphQL schema of your Gatsby project 

How to Install

To install this plugin, run the script: yarn add gatsby-plugin-readingtime-contentful

6. Gatsby-theme-profile-builder

If you want to build a portfolio site, gatsby-theme-profile-builder is the ideal solution. It enables you to display your work, skills, and even blog posts without having to write any code. Only a few settings are required for the setup. A light/dark mode switch is another cool feature of this theme.

How to Install

To install this plugin, run the script: npm install --save @ashr81/gatsby-theme-profile-builder

7. Gatsby-source-contentful/rich-text

We previously discussed the powerful plugin gatsby-source-contentful, which allows you to import any content type, entry, or asset into Gatsby from Contentful spaces.

This plugin adds rich text feature support. When using the Rich Text field, a common issue is that it returns the response as pure JSON rather than HTML. You can serialize the field content to HTML by using the rich text feature in this source plugin. 

How to Install

To make use of this feature, first, install the plugin: npm install --save gatsby-source-contentful

8. gatsby-plugin-catch-links

This plugin intercepts all local links that were not created in React using gatsby-link and replace their behavior with that of gatsby-link navigate. This prevents the browser from having to refresh the entire page when navigating between local pages, preserving the Single Page Application (SPA) feel.

How to Install

To make use of this feature, first, install the plugin: npm install gatsby-plugin-catch-links 

9. gatsby-plugin-image

It can be difficult to manually add responsive images to your site while maintaining high-performance scores. The Gatsby Image plugin handles the tedious task of creating images in a variety of sizes and formats for you.

How to Install

To make use of this feature, first, install the plugin: npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem gatsby-transformer-sharp 

10. Gatsby-plugin-performance-metrics

The gatsby-plugin-performance-metrics plugin measures a web page's First Contentful Paint (FP/FCP) and First Input Delay (FID). These metrics can help you improve your website's Google PageSpeed Insights score and overall UI/UX.

Once a user navigates to a page, FCP measures the time it takes for a browser to render the first piece of DOM content. Similarly, FID measures the time elapsed between a user's first interaction with a webpage (such as clicking a button) and the browser's response to that action.

How to Install

To install this plugin, run the script: npm install --save gatsby-plugin-performance-metrics

Wrapping Up

After reading this article, you either are ready to install all ten plugins or are convinced that DatoCMS is the right headless solution to handle all of your website's content. Before coming to that conclusion, we suggest reading our Contentful vs. DatoCMS in-depth comparison.

Just like DatoCMS, Gatsby plugins for Contentful offer extended functionality for Gatsby-Contentful applications. Check out how both headless platforms compare to each other before making a final decision.