Gatsby.js and Drupal

By: Alex Cooper

About this talk





What will this talk cover?

  • React
  • GraphQL
  • Gatsby

What will this talk not cover?

  • Node/JavaScript
  • Security
  • Authentication


  • Introduction
  • Intro to Gatsby
  • Intro to React
  • Basics of Building with Gatsby and Drupal
  • *Plot Twist*
  • Wrap-up

What is React?

React is

  • A JavaScript UI library
  • Declarative
  • Component-based
  • Re-useable
const name = 'Josh Perez';
const element = 

Hello, {name}

; ReactDOM.render( element, document.getElementById('root') );
function formatName(user) {
  return user.firstName + ' ' + user.lastName;

const user = {
  firstName: 'Harper',
  lastName: 'Perez'

const element = (

Hello, {formatName(user)}!

); ReactDOM.render( element, document.getElementById('root') );
function getGreeting(user) {
  if (user) {

Hello, {formatName(user)}!

; } return

Hello, Stranger.

; }
class Example extends React.Component {
  constructor(props) {
    this.state = {
      count: 0

  render() {
    return (

You clicked {this.state.count} times

); } }
import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (

You clicked {count} times

); }

The code snippets from above can be found here:

JSX/Component examples

Count examples, class vs hook.

What is Gatsby?

A blazing fast static application generator for React.js

Gatsby 'rehydrates' your React app

JAM Stack

What is blazing fast?

  • Fast load time
  • First Contentful Paint (FCP)
  • Time to Interaction (TTI)

How do we get blazing fast?

  • Code Splitting
  • Tree Shaking
  • Pre-Fetch/Pre-Cache

Gatsby Plugins

356 Source Plugins

192 Theme Plugins


Why use Drupal as a Backend?

Complex Workflows

Built-in WYSIWYG

Access Control

Open Source, Self-Hosted


Web Services/JSON API/Rest/GraphQL

Main Drupal Site/Mini-Site/Special Pages/Native Apps/IoT/etc.






npm install -g gatsby-cli

Building A Gatsby Site

gatsby new [site name]


 * Implement Gatsby's Node APIs in this file.
 * See:

// You can delete this file if you're not using it


module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  plugins: [
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit:
    // `gatsby-plugin-offline`,


import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

const IndexPage = () => (

Hi people

Welcome to your new Gatsby site.

Now go build something great.

Go to page 2
) export default IndexPage

Setting Up a Drupal Site for Gatsby

For a Gatsby+Drupal Site, You Need Two Things:

  1. The JSON API Module
  2. Content

Getting our Drupal Data in GraphQL

[Live Demo]

Using our Data

Three Steps:

  1. Build Components
  2. Build Templates
  3. Dynamically Build Pages

[Live Demo]

The Plot Twist!

I wanted to do something unique...

So I made a custom content type...

Building & Deploying

gatsby develop
gatsby build


Next Steps

Improve the templates

Implement Authentication/security

Improve the API

Explore Plugins