How to setup Gatsby to work with Craft CMS via the GraphQL

A step by step tutorial on setting up Gatsby to work with Craft CMS via the GraphQL. Github repository included.

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 09/13/2022 at 12:44
Last Updated on 07/25/2023 at 16:15
Three flowers that represent Craft CMS, GraphQL & Gatsby with the text 'Setup Gatsby to work with Craft CMS via the Graph' beneath them.

A step by step tutorial on setting up Gatsby to work with Craft CMS via the GraphQL. Github repository included.

The following tutorial builds of our open source Typescript & Gatsby starter project series and walks you through how to setup Gatsby to work with Craft CMS via the GraphQL.

Download Open Source projectHow to add Typescript to GatsbyJSHow to add Alias's / Paths in Typescript & GatsbyHow to add React Redux to Gatsby

Step One: Create Environment Variables

A screenshot of VSCode showing how to enter the environment variables required for the GraphQL plugin to work.

In the root directory create a .env file and add the following two variables:

  • GATSBY_CRAFTCMS_AUTH_BEARER
  • GATSBY_CRAFT_GRAPHQL_API

Please note that both of these variables are strings where the API is the URL of your GraphQL API endpoint (/graphql/api/ unless you modified it) and the AUTH_BEARER is the authentication header acquired from your Craft CMS GraphQL Token. If you are curious to to find these or setup Craft CMS to work with the GraphQL follow the tutorial below.

How to setup Craft CMS to work with the GraphQL

Step Two: Install Dependency

A screenshot of terminal running the line required to install the gatsby-source-graphql dependency.

Using your terminal add the gatsby-source-graphql dependency.

yarn add gatsby-source-graphql

Step Three: Update gatsby-config.js

A screenshot of the gatsby-config demonstrating the changes required to implement the gatsby-source-graphql dependency. Sample code available in a gist below.

Update your Gatsby Config to include the gatsby-source-graphql plugin, with the relevant options.

Please note that CraftAPI will be used in your GraphQL queries and this can be anything that you wish.

Looking for a more powerful plugin that scales ?

gatsby-source-graphql is ideal for small projects but falls shorts on larger builds.

To learn how to setup your project for success at scale follow the tutorial below.

How to setup the Gatsby Source Craft Plugin

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
SubscribeContact UsVisit our BlogView our ServicesView our Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe