Ecosystem

Design

Source plugins

What’s in this tutorial?

In this tutorial, you’ll be learning about how to pull data into your Gatsby site using GraphQL and source plugins. Before you learn about these plugins, however, you’ll want to know how to use something called GraphiQL, a tool that helps you structure your queries correctly.

Introducing GraphiQL

GraphiQL is the GraphQL integrated development environment (IDE). It’s a powerful (and all-around awesome) tool
you’ll use often while building Gatsby websites.

Here we poke around the built-in Site “type” and see what fields are available
on it—including the siteMetadata object we queried earlier. Try opening
GraphiQL and play with your data! Press Ctrl + Space to bring up
the autocomplete window and Ctrl + Enter to run the query. We’ll be
using GraphiQL a lot more through the remainder of the tutorial.

The console.log(data) line is highlighted above. It’s often helpful when
creating a new component to console out the data you’re getting from the query
so you can explore the data in your browser console while building the UI.

If you visit the new page at /my-files/ and open up your browser console you
will see:

What’s coming next?

Now you’ve learned how source plugins bring data into Gatsby’s data system. In the next tutorial, you’ll learn how transformer plugins transform the raw content brought by source plugins. The combination of source plugins and transformer plugins can handle all data sourcing and data transformation you might need when building a Gatsby site. Click here for the next tutorial to learn about transformer plugins.