Embracing the modern web using Drupal as a Headless CMS with Gatsby BADCamp

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

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

Challenges
Performance Reliability Security Hosting

Is there anything else we can use?

Visitor CDN
The JAMStack Stack

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

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

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

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

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

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

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/

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

TUI Editor (WYSIWYG for markdown)

Build Hooks (Trigger a external build hook)

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

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

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

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

Gatsby Source Airtable
{
  resolve: `gatsby-source-airtable`,
  options: {
    apiKey: process.env.AIRTABLE_API_KEY,
    tables: [
      {
        baseId: àppVUfH5DCWgBSBH1`,
        tableName: `Statistics`,
        mapping: {
          icon: `fileNode`,
        }
      },
      {
        tableName: Èvents`,
      },
      {
        tableName: `Presentations`,
        tableLinks: [èvent`],
      },
    ]
  }
},

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`),
        }
    })
  }
};

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

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,
        },
      })
    })
  })

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
    }
  }
`

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
                }
              }
            }
          }
        }
      }
    }
  }
`

export const ParagraphJSXComponentFragment = graphql`
  fragment ParagraphJSXComponentFragment on paragraph__jsx_component {
    __typename
    field_component
    field_text {
      processed
    }
    field_title {
      processed
    }
  }
`

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

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>
  );

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} />),
}

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} />);
    }
. . .

. . .
   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;
}

Thank you
Feel free ask here and via twitter @jmolivas

Embracing the modern web using Drupal as a Headless CMS with Gatsby BADCamp

More Related Content

More from Jesus Manuel Olivas (18)

Recently uploaded (20)

Embracing the modern web using Drupal as a Headless CMS with Gatsby BADCamp