We just launched our new Hygraph Studio in beta. Learn more

Announcing the Official Hygraph Source Plugin for Gatsby!

We've just flipped the switch on the shiny new gatsby-source-hygraph from beta to public. Check it out!
Jonathan Steele

Jonathan Steele

Nov 02, 2020
Hygraph Gatsby Source Plugin

We're excited to announce that the official gatsby-source-hygraph plugin is out of beta.

View the repo to learn more, or check out the demo of our blog starter using the plugin.

#Getting Started

Let's go over how to get started with the new source plugin by creating a Gatsby site using our Blog starter, capable of querying data grom Hygraph.

This guide assumes you have an active Hygraph account and have created a new project, preferably using the Blog starter.

Create a new Gatsby site

gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-default

Once finished, navigate into the project with cd gatsby-site.

Add the gatsby-source-hygraph plugin

In order to fetch data from your Hygraph project, you will need to install gatsby-source-hygraph.

You can install this package with:

yarn add gatsby-source-hygraph

Configuration

The last step required before you can query your data is to configure gatsby-source-hygraph. Inside of gatsby-config.js`, add a new plugin configuration.

We recommend using environment variables with your Hygraph token and endpoint values. You can learn more about using environment variables with Gatsby here.

{
resolve: 'gatsby-source-hygraph',
options: {
// Your Hygraph API endpoint. Available from your project settings.
endpoint: process.env.HYGRAPH_ENDPOINT
// A PAT (Permanent Auth Token) for your project. Required if your project is not available publicly, or you want to scope access to a specific content stage (i.e. draft content).
token: process.env.HYGRAPH_TOKEN
},
},

Blog Author

Jonathan Steele

Jonathan Steele

Share with others

Sign up for our newsletter!

Be the first to know about releases and industry news and insights.