/gatsby-starter-craftcms

Gatsby starter, craftcms, page transitions, rematch, tailwind, purge... offline, i could go on! - magicspon/gatsby-starter-craftcms

Primary LanguageJavaScript

Gatsby Starter Craftcms

Use Craftcms as a headless cms. Pull data into Gatsby via craftql that exposes the craft api as a grapql layer. Lovely stuff

Demo

wearestraightline

Features

Getting Started

Install craft Installation Instructions | Craft 3 Documentation

Install craftql GitHub - markhuot/craftql: A drop-in GraphQL server for Craft CMS

Once the helloWorld query works in craft, you’re in business

For the example code to work you’ll need to create a channel called blog, and add a few entries, they only need titles for now.

Gatsby

npm install

Open gatsby-config.js

You’ll need to add url for the craftql endpoint, and the bearer token:

{
	resolve: 'gatsby-source-graphql',
	options: {
		fieldName: 'craft',
		typeName: 'Craft',
		url: 'https://yourdomain/api',
		headers: {
			Authorization:
				'bearer XXXX'
		}
	}
},

npm start

You can now go to https://localhost:8000 and https://localhost:8000/___graphql

Go to the graphql explorer at https://localhost:8000/___graphql

Have a play. All of the Types are prefixed with Craft_

For example

{
	craft {
		entries(section: [blog]) {
			... on Craft_Blog {
				title
				uri
				postDate
			}
		}
	}
}

And that’s the weather…

Enjoy.