Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

Creating a Source Plugin

The goal of this tutorial is to help you create a fully-featured source plugin for Gatsby. Along the way, you'll learn key concepts and patterns of Gatsby and its plugin system. You'll source data from an example third-party API, populate Gatsby's data store and use it inside your example site.

0. Prerequisites

Introduce yourself to the basics of a source plugin, what it does, why you should build one, and learn how this guide is structured.

1. Project Setup

Set up your local project by cloning the companion repository and get yourself familiar with the structure and functionality.

2. Create Nodes

Learn how to source data into Gatsby, create GraphQL nodes, and display your data in a Gatsby site.

3. Define GraphQL Schema

Understand automatic type inference, how to explicitly define your GraphQL schema, and how to add a foreign-key relationship between GraphQL types.

4. Utilities

Get to know different Node API helpers to further improve your plugin.

5. Incremental Builds

Decrease the time it takes for your users to see their changes applied by optimizing your plugin with Incremental Builds.

6. Image CDN

Instead of processing images at build time, Image CDN defers and offloads image processing to the edge.

7. Advanced Topics

Want to learn even more? Dive into some more advanced topics.

8. Publishing

Learn how you can publish your Gatsby source plugin to npm.

What's Next?

Continue your Gatsby source plugin journey with these additional resources.

© 2023 Gatsby, Inc.