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

Oscar de la Hera Gomez
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.

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.

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.

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.
delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details