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

• Craftcms as a backend (Craft CMS | Focused content management for web professionals)
• Tailwind (Tailwind CSS - A Utility-First CSS Framework for Rapid UI Development)
• Page transitions with Pose (Pose | A truly simple animation library for React, React Native, and Vue)
• CSS in JS via emotion (emotion)
• Remove unused CSS with purgecss (Introduction - Purgecss)
• Rematch store (Getting Started · Rematch)
• Offline (gatsby-plugin-offline | GatsbyJS)
• Manifest gatsby/packages/gatsby-plugin-manifest at master · gatsbyjs/gatsby · GitHub
• Fork of gatsby-image to work with craft-imageoptimizer GitHub - nystudio107/craft-imageoptimize: Automatically create & optimize responsive image transforms, using either native Craft transforms or a service like Imgix, with zero template changes.
• Sitemap (integrated with Craftcms)
• SVG Symbols
• ESLint (Airbnb style, prettier, jsx-a11y)

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.