Contenu connexe Similaire à Embracing the modern web using Drupal as a Headless CMS with Gatsby BADCamp (20) Plus de Jesus Manuel Olivas (20) Embracing the modern web using Drupal as a Headless CMS with Gatsby BADCamp1. 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
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)
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/
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
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
30. Feel free to turn off your Drupal site after build
●https://twitter.com/ckaotik/status/647020262001614848
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`],
},
]
}
},
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
}
}
`
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
}
}
}
}`
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;
}