This document discusses using Drupal as a headless CMS with GatsbyJS to build blazing fast websites. It outlines some challenges of traditional monolithic CMS and benefits of a headless approach. Key aspects covered include using Drupal for content modeling and editing while leveraging Gatsby for performance. It provides examples of configuring Gatsby sources, creating pages and fragments, mapping data to React components, and component resolution.

1. Embracing the modern web using
Drupal as Headless CMS
with GatsbyJS
by Jesus Manuel Olivas / weKnow

2. $ whoami
Jesus Manuel Olivas
jmolivas@weknowinc.com
twitter.com/jmolivas
github.com/jmolivas
drupal.org/u/jmolivas
jmolivas.weknowinc.com

3. weAre

4. 101 Web Development

6. Traditional Monolithic CMS

7. The Traditional Headless
+

8. Visitor Server CMS Database

9. Challenges
Performance Reliability Security Hosting

10. Is there anything else we can use?

11. Static Site Generators

12. Back to the flat-files

13. Visitor CDN
The JAMStack Stack

14. Challenges
• Web Forms (CRM Integration , Serverless
Function, Form submission PaaS)
• E-Commerce (Shopify, Salsify, PXM,
Headless Commerce, Stripe, Paypal, Recurly)
• Comments (Disqus, Serverless functions)

15. A GUI providing a WYSIWYG to
enter content and create a content
model

16. Decoupling the
"Content Management System"
from the
“Production Environment".

17. ●
Git Based / Headless CMS
●
CloudCannon
NetlifyCMS
Forestry
Blaze
Sanity
Drupal
Contentful

18. Gatsby is a free and open source
framework based on React that
helps developers build blazing
fast websites and apps

20. The Content Mesh
● https://www.gatsbyjs.org/blog/2018-10-18-creating-compelling-content-experiences/

21. https://github.com/weknowinc/drupal-boina
https://github.com/weknowinc/gatsby-starter-drupal-boina
How to Start?
https://boina.weknowinc.com/
http://drupal-boina.weknowinc.com/

22. Must have Gatsby plugins
• gatsby-source-drupal
• gatsby-transformer-remark
• gatsby-remark-drupal (support drupal images)
• gatsby-remark-images
• gatsby-remark-external-links
• gatsby-plugin-sharp
• gatsby-plugin-react-helmet

23. JSON:API

24. TUI Editor (WYSIWYG for markdown)

25. Build Hooks (Trigger a external build hook)

26. Gatsby Live Preview
https://weknowinc.com/blog/drupal-and-gatsby-live-preview

27. What to keep using
• Data modeling.
• Content editor capabilities,
revisions, moderation and
scheduling.
• Pathauto
• Site Settings
• Twig
• Render array
• Theme layer
• Theme preprocessing
• Views (use GraphQL instead)
What is Gone

29. ●●

30. Feel free to turn off your Drupal site after build
●https://twitter.com/ckaotik/status/647020262001614848

31. Code or didn't happen

34. Source Data

35. Gatsby Source Drupal
{
resolve: 'gatsby-source-drupal',
options: {
baseUrl: `${process.env.DRUPAL_HOST}`,
apiBase: `api`,
preview: true,
},
},

36. Gatsby Source Airtable
{
resolve: `gatsby-source-airtable`,
options: {
apiKey: process.env.AIRTABLE_API_KEY,
tables: [
{
baseId: `appVUfH5DCWgBSBH1`,
tableName: `Statistics`,
mapping: {
icon: `fileNode`,
}
},
{
baseId: `appVUfH5DCWgBSBH1`,
tableName: `Events`,
},
{
baseId: `appVUfH5DCWgBSBH1`,
tableName: `Presentations`,
tableLinks: [`event`],
},
]
}
},

37. Custom Source API
exports.sourceNodes = async ({ actions }) => {
const {createNode} = actions;
const items = await axios.get(`https://YOUR-API-ENDPOINT-URI`);
for (const item of items.data) {
await createNode({
children: [],
...item,
parent: null,
internal: {
type: 'Items',
contentDigest: crypto
.createHash(`md5`)
.update(JSON.stringify(item))
.digest(`hex`),
}
})
}
};

38. Create Pages

39. Create Pages 1/2
exports.createPages = ({ graphql, actions }) => {
const { createPage } = actions
return graphql(`
{
allNodeLanding(filter: {path: {alias: {ne: "/homepage"}}}) {
edges {
node {
path {
alias
}
}
}
}
}
`)

40. Create Pages 2/2
.then(result => {
if (result.errors) {
throw result.errors
}
const landings = result.data.allNodeLanding.edges
landings.forEach(landing => {
createPage({
path: landing.node.path.alias,
component: path.resolve(`./src/templates/landing.js`),
context: {
slug: landing.node.path.alias,
},
})
})
})

41. Create GraphQL Fragments

42. Paragraphs as GraphQL Fragments
import { graphql } from 'gatsby';
export const ParagraphCtaFragment = graphql`
fragment ParagraphCtaFragment on paragraph__cta {
__typename
field_cta_link {
alias
}
field_download
field_is_animated
field_cta_size
field_bg_color
field_text {
processed
}
}
`

43. Paragraphs as GraphQL Fragments
import { graphql } from 'gatsby';
export const ParagraphHeroFragment = graphql`
fragment ParagraphHeroFragment on paragraph__hero {
__typename
field_title {
processed
}
relationships {
field_background_image {
relationships {
field_media_image {
localFile {
childImageSharp {
fluid(maxWidth: 1440, maxHeight: 560, cropFocus: CENTER) {
...GatsbyImageSharpFluid
}
}
}
}
}
}
}
}
`

44. Paragraphs as GraphQL Fragments
import { graphql } from 'gatsby';
export const ParagraphJSXComponentFragment = graphql`
fragment ParagraphJSXComponentFragment on paragraph__jsx_component {
__typename
field_component
field_text {
processed
}
field_title {
processed
}
}
`

45. Use GraphQL Fragments

46. GraphQL queries using Fragments
query landingBySlug($slug: String!) {
landing: nodeLanding(path: {alias: {eq: $slug}}) {
title
relationships {
field_components {
...ParagraphHeroFragment
...ParagraphJSXComponentFragment
...ParagraphGridCardFragment
...ParagraphTextContentFragment
...ParagraphPartnersFragment
...ParagraphCtaFragment
}
}
}
}`

47. Render React Components

48. Render Components
import { componentResolver } from '../utils'
const field_components = componentResolver(landing.relationships.field_components);
return (
<Layout>
<SEO
title={}
keywords={[]}
/>
{field_components && (
field_components.map((item, i) => {
return (
<React.Fragment key={i}>
{item}
</React.Fragment>
)
})
)}
</Layout>
);

49. Map Data to Components

50. Resolve Components 1/3
import TitleHero from ‘../components/title-hero';
import Cta from ‘../components/cta’;
import StatsBlocks from '../components/stats-blocks'
import StatsEventsBlocks from '../components/stats-events-blocks'
import TeamAdmin from '../components/team-admin'
import AnimatedWordsHero from '../components/animated-words-hero'
import Presentations from '../components/presentations';
const JSXComponents = {
StatsBlocks: (props) => (<StatsBlocks {...props} />),
TeamAdmin: (props) => (<TeamAdmin {...props} />),
StatsEventsBlocks: (props) => (<StatsEventsBlocks {...props} />),
AnimatedWordsHero: (props) => (<AnimatedWordsHero {...props} />),
Presentations: (props) => (<Presentations {...props} />),
}

51. Resolve Components 2/3
export const componentResolver = (data) => {
const components = [];
data.forEach(element => {
if (element.__typename === `paragraph__hero`) {
const title = element.field_title ? element.field_title.processed : ``;
const field_image = element.relationships.field_image.relationships;
const image = field_image.field_media_image.localFile.childImageSharp.fluid;
components.push(<TitleHero title={title} image={image} />);
}
. . .

52. Resolve Components 3/3
. . .
if (element.__typename === `paragraph__jsx_component`) {
const Component = JSXComponents[element.field_component];
const title = element.field_title ? element.field_title.processed : '';
const text = element.field_text ? element.field_text.processed : '';
components.push(<Component title={title} text={text} />);
}
})
return components;
}

53. Thank you
Feel free ask here and via twitter @jmolivas