Building Static Sites with
WordPress, Gatsby & WPGraphQL

WebDevStudios Lunch & Learn

Who Am I?

Jason Bahl | @jasonbahl

What This Talk Covers

  • Why should we care about Static Sites?
  • What is GatsbyJS and how does it work?
  • What is WPGraphQL and how does it work?
  • How to use WPGraphQL with Gatsby

End Goal:

WordPress as CMS, Static Gatsby Site to render the content

Dynamic Source Site

Resulting Static Site

Why Static Sites?

Why Static Sites?

Dynamic Sites

Static Sites

  • pre-generated
  • low-resource
  • usable offline
  • secure by default 
  • compiled on the fly
  • resource-intensive
  • online only
  • needs security 

WordPress Request

Static Site Request

Why Static Sites?

Blazing Fast!

Why Static Sites?

Super Secure!

Why Static Sites?

Super Secure!

Why Static Sites?

Crazy Cheap Hosting!

(Even at massive scale)

Why Static Sites?

Sometimes Free!

GatsbyJS

GatsbyJS:
React Static Site Generator

  • React Templating
  • Uses GraphQL to source content​
  • Optimizes images​
  • Link prefetching​
  • React Helmet for SEO​
  • PWA / Service Workers

WPGraphQL

GraphQL

{
     viewer {
          name
     }
}

{

     data: {

          viewer: {

               name: "Jason Bahl"

          }

     }
}

GraphQL Query

GraphQL Result

Post

Category

Category

Category

Post

title

"Hello World"

title

"GoodBye Mars"

Image

Image

Image

name

"news"

name

"crime"

name

"sports"

Image

WordPress as an Application Data Graph

GraphQL

GraphQL lets us pick trees out of the Application Data Graph

GraphQL

query {
  post(id: "cG9zdDox") {
    title
    link
    categories {
      nodes {
        name
      }
    }
  }
}
{
  data: {
    post: {
      title: "Hello World!"
      link: "http://site.com/hello-world"
      categories: {
        nodes: [
          {
            name: "sports"
          },
          {
            name: "crime"
          }
        ]
      }
    }
  }
}

Post

Category

Category

Category

Post

title

"Hello World"

title

"GoodBye Mars"

Image

Image

Image

name

"news"

name

"crime"

name

"sports"

Image

GraphQL

Solving the N+1 Problem

const createPosts = require(`./gatsby/createPosts`)
const createPages = require(`./gatsby/createPages`)
const createUsers = require(`./gatsby/createUsers`)
const createCategories = require(`./gatsby/createCategories`)
const createTags = require(`./gatsby/createTags`)

exports.createPages = async ({ actions, graphql }) => {
  await createPosts({ actions, graphql })
  await createPages({ actions, graphql })
  await createUsers({ actions, graphql })
  await createCategories({ actions, graphql })
  await createTags({ actions, graphql })
}

gatsby-node.js

gatsby/createPosts.js

graphql(
`
  query GET_POSTS($first:Int $after:String){
    wpgraphql {
      posts(
        first: $first 
        after:$after
      ) {
        pageInfo {
          endCursor
          hasNextPage
        }
        nodes {
          id
          uri
          postId
          title
        }
      }
    }
  }
  `).then(({data}) => { ... })
const postTemplate = `./src/templates/post.js`
allPosts.map(post => {
       createPage({
        path: `/blog/${post.uri}/`,
        component: postTemplate,
        context: post,
      })
    })

templates/post.js

export const pageQuery = graphql`
  query GET_POST($id: ID!) {
    wpgraphql {
      post(id: $id) {
        title
        content
        author {
          name
          slug
          avatar {
            url
          }
        }
        categories {
          nodes {
            name
            link
          }
        }
      }
    }
  }
`

Live Code?

Trade-offs with Gatsby

  • Blazing Fast
  • Super Secure
  • Crazy Cheap
  • Fun (in my opinion) Development Experience
  • All JavaScript
  • Decoupled from WordPress

PROS:

  • Build Step
    • Content not immediately available
  • No incremental builds
  • All JavaScript
  • Decoupled from WordPress

CONS:

Conclusions

  • GatsbyJS is a fantastic static site generator
     
  • WPGraphQL is a comprehensive API for all of your WordPress data needs

Resources:

Building Static Sites with WordPress, Gatsby and WPGraphQL - WebDevStudios Lunch & Learn

By Jason Bahl

Building Static Sites with WordPress, Gatsby and WPGraphQL - WebDevStudios Lunch & Learn

Slides for WordCamp Phoenix 2019 about Building Static Sites with WordPress, Gatsby and WPGraphQL

  • 84
Loading comments...

More from Jason Bahl