GraphQL for WordPress

GatsbyJS Prague
Nov. 2019

Who Am I?

What We'll Go Over

  • WPGraphQL Roadmap & v1.0
  • When is Gatsby Source for WPGraphQL Coming?
  • Caching options for WPGraphQL
  • How to handle images with WP + Gatsby?
  • How to handle dynamic data and Gatsby mutations?

WPGraphQL Roadmap & v1.0

WPGraphQL Roadmap & v1.0

Headless WordPress themes wasn't the original goal / use case

Why WPGraphQL Exists

Personal Story

  • Distributed WordPress Installs
  • Content Syndication
  • Micro-apps that can interact with any number of WordPress installs

Frustrations with REST

  • Implicit requests are difficult for long-term code maintenance
  • Constant over/under-fetching
    • Unnecessarily moving tons of data over the wire
  • So many requests needed to READ / WRITE the data needed to syndicate

Frustrations with REST

(still)

 

  • Implicit requests are difficult for long-term code maintenance
  • Constant over/under-fetching
    • Unnecessarily moving tons of data over the wire
  • So many requests needed to READ / WRITE the data needed to syndicate
  • Poor performace
    • We wanted REST to provide everything so any client could have what they needed
    • Wrapping a non-performant REST API with GraphQL === non-performant GraphQL API

Why WordPress + GraphQL?

Generally Speaking

  • WordPress powers 28% of the Web
    • Stated Goal of reaching 51%
    • GraphQL Ubiquity
  • Both Open Source, Community Centric
  • Both solve general problems for the web

WPGraphQL is a free, open-source WordPress plugin that provides an extendable GraphQL schema and API for any WordPress site.

Adding the Plugin to WordPress

Install & Activate the Plugin

Posts

Pages

Users

Comments

Terms

Media

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

WPGraphQL Roadmap & v1.0

WPGraphQL Roadmap & v1.0

  • Address any predictable breaking changes
  • Nesting 1-to-1 Connections
  • Revisions / Preview Support
  • Better Interface implementation/support
  • Content connection (Query posts of any Post Type)
  • Security Audit

Gatsby Source WPGraphQL

Gatsby Source WPGraphQL

  • Deprecate Gatsby source for WP REST API
  • Template Hierarchy
  • Routing
  • Search
  • Preview
  • Efficient Caching (fast rebuilds)
  • Live Data Updates (Instant rebuilds)*

Gatsby Source WPGraphQL

When?!?

Target: Spring 2020

Caching options for WPGraphQL

How to handle images with WP + Gatsby?

  • WordPress is a server that can process images
  • Gatsby's Build step uses a Node server that can process images

Let WordPress Process Images

Let Gatsby Process Images

WordPress

Gatsby

  • Images available to any source (mobile, etc)
  • Images available only to Gatsby
  • Doesn't work properly with Gatsby image component
  • Works with Gatsby Image Component
  • Process image on upload
  • Process image during Gatsby build

Tradeoffs

How to handle dynamic data and Gatsby mutations?

Mutation Code

Get Involved!