GraphQL for WordPress

GatsbyJS Prague
Nov. 2019

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
- https://github.com/wp-graphql/wp-graphql

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

http://graphql.org/learn/thinking-in-graphs/#business-logic-layer

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

Visit Github: https://github.com/wp-graphql/wp-graphql
Star the Repo
Tweet about how awesome it is to be able to use GraphQL with WordPress
Clone or Download the plugin
Install & Activate

Install & Activate the Plugin

http://graphql.org/learn/thinking-in-graphs/#business-logic-layer

Posts

Pages

Users

Comments

Terms

Media

GraphQL

{
viewer {
name
}
}

{

data: {

viewer: {

name: "Jason Bahl"

}

}
}

GraphQL Query

GraphQL Result

Post

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