A collection of lessons that describe how to create a Gatsby source plugin from scratch to npm

You will create your own source plugin for gatsby to get external data avaialable through a REST API into gatsby. The plugin will retrieve the data and create the gatsby nodes to make the data available through the gatsby graphql queries so you can use the data into your site.

To create this source plugin you will use some of the methods provided by the gatsby API like `sourceNodes`, `createNode`, `createNodeId` and  `createContentDigest`

Create a Gatsby Source Plugin to Consume an External REST API

The plugin that you just implemented, each created node contains an attribute call `artwork_url` that references an URL for an external image. Is possible to directly use that URL to load the images in your site, but the images can big big and take too much time to load. You can optimize this images directly in your plugin to allow the site that use it to drop it directly into `gatsby-image`.


To accomplish the goal of optimizing the external images, your plugin will have to create a new type of node. This new file node will allow the user of your plugin to harness the power of the plugins `gatsby-plugin-sharp` and `gatsby-transformer-sharp` to perform transformations over the image field.


Optimize Remote Images in a Gatsby Source Plugin

It's possible to pass configuration parameters to your Gatsby plugin. One use case is just allow the plugin to be used multiple times creating different queries that will be available for your site.

To do this you need to refactor the origin plugin code to accept this parameters and update the `gatsby-config.js` file to set them there.

Creating a Gatsby Source Plugin

Instructor

Course Content