Announcing the Official Hygraph Source Plugin for Gatsby!

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
    },
},