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 StartedAnchor

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 siteAnchor

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 pluginAnchor

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

ConfigurationAnchor

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