Announcing the official GraphCMS source plugin for Gatsby!

Jonathan Steele
Jonathan Steele

November 2, 2020

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 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 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 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-graphcms plugin

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

Configuration

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 reach out to our sales team to discuss larger projects with more complex needs