Take the above URL and paste it in to a browser to see Pixabay’s response to your query. It gives you a list of photos matching the query “yellow flowers” that have received an Editor’s Choice award.

NOTE: You should replace <YOURAPIKEY_HERE> with your Pixabay API key.

Plugin behavior

Your plugin will have the following behavior:

Accept config options like a Pixabay API key and a search query

Make an API request using the provided config options

Convert the data in the API response to Gatsby’s node system

Setup a new Gatsby site

Create a new Gatsby project and change directories into the new project you just created.

gatsby new source-tutorial-site
cd source-tutorial-site

You’re going to build your plugin as a “local” plugin that only exists for your project. Later on you’ll learn how to publish a plugin to npm so anyone can use it, but for now create a plugins directory and change into that directory:

mkdir plugins
cd plugins

Create a plugins folder

The bare essentials of a plugin are a directory named after your plugin, which contains a package.json file and a gatsby-node.js file:

Then you implemented Gatsby’s sourceNodes API which Gatsby will run as part of its bootstrap process. When Gatsby calls sourceNodes, it’ll pass in some helper functions (boundActionCreators and createNodeId) along with any config options that are provided in your project’s gatsby-config.js file:

You’ve added code that fetches photo data from the Pixabay API. For now, your plugin logs that data but doesn’t do anything else. Check that you can see the logged photo data by restarting gatsby develop. This time you should see a series of results like:

Experiment with different options in your gatsby-config.js file to see how that affects your query results. The Pixabay API docs might be a useful reference.

Publishing a plugin

You’ve built a local plugin for your project, but what if you want to share it with others? npm allows you to publish your plugins. Check out the npm docs on How to Publish & Update a Package for more info.

A note on JavaScript versions

In this tutorial you’ve written code in a version of JavaScript that’s compatible with Node.js version 6 and above.

Jason’s version of the plugin uses newer JavaScript features with babel to provide compatibility for older versions of Node. Compare your code with Jason’s to see how newer JavaScript features allow for more succinct code.