Building Static Sites with
WordPress, Gatsby & WPGraphQL



WebDevStudios Lunch & Learn
Who Am I?
- Software Engineer at Gatsby
- Denver native
- WordPress Developer for 10+ years
- I love WordPress, and Open Source in general
- Creator & maintainer of WPGraphQL
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
- 1,342