Announcing the Official GraphCMS Source Plugin for Gatsby!

We're excited to announce that the official gatsby-source-graphcms 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 GraphCMS.

This guide assumes you have an active GraphCMS 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-graphcms pluginAnchor

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

You can install this package with:

yarn add gatsby-source-graphcms

ConfigurationAnchor

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

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

{
  resolve: 'gatsby-source-graphcms',
    options: {
      // Your GraphCMS API endpoint. Available from your project settings.
      endpoint: process.env.GRAPHCMS_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.GRAPHCMS_TOKEN
    },
},