Announcing the Official GraphCMS Source Plugin for Gatsby!

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

Jonathan Steele
Jonathan Steele
GraphCMS Gatsby Source Plugin

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

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


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

It's Easy To Get Started

GraphCMS plans are flexibly suited to accommodate your growth. Get started for free, or request a demo to discuss larger projects with more complex needs