GraphQL for WordPress

Desert GraphQL Meetup
Oct 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

Why WordPress + GraphQL
Quick WordPress Overview
Installing and Using the WPGraphQL Plugin
WordPress as an Application Data Graph
Efficient Data Fetching with GraphQL
WPGraphQL + Gatsby
What's next?

Why WordPress + GraphQL?

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.

Quick WordPress Overview

Content Types (Posts, Pages, Custom)

Content Editor

Taxonomy Terms (Categories, Tags, Custom)

Media Library

Users

Comments

Themes

Plugins

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

Demo Time!

Comparing APIs

Data Requirements:

List of posts
author
- name
- avatar (size: 50)
  - url
site
- name
- link
followLink
title
featuredImage (width: 300)
- url
excerpt

Comparing APIs

<?php
$posts = new WP_Query( 
    array(
        'post_type' => 'post',
        'posts_per_page' => 4,
        'post_status' => 'publish'
    ) 
);

# Loop through the posts

<?php
# Author Data
$author = get_the_author();
$author_name = $author->display_name;
$avatar = get_avatar_data( $author->ID );
$avatar_url = $avatar->url;

# Site Info
$sites = wp_get_post_terms( 
    $post->ID, 'sites' 
);
$site_name = $sites[0]->name;
$site_link = get_term_meta( 
    $sites[0]->term_id, 
    'link', 
    true 
);

# Follow Link
$follow_link = your_follow_link_func();

# Title
$title = get_the_title();

# Featured Image
$img = get_the_post_thumbnail_url( 
    $post->ID, 
    array( 300 ) 
);

# Excerpt
$excerpt = get_the_excerpt();

Comparing APIs

# Posts

# Assumes follow link is a registered
# field on the post endpoint

HTTP GET 
/wp-json/wp/v2/posts?per_page=4

$posts.map((post) => {
    $title = post.title;
    $excerpt = post.excerpt;
    $follow = post.followLink;
});

# Authors

HTTP GET 
/wp-json/wp/v2/user/{posts[0].author}
/wp-json/wp/v2/user/{posts[1].author}
/wp-json/wp/v2/user/{posts[2].author}
/wp-json/wp/v2/user/{posts[3].author}
/wp-json/wp/v2/user/{posts[0].author}/avatar
/wp-json/wp/v2/user/{posts[1].author}/avatar
/wp-json/wp/v2/user/{posts[2].author}/avatar
/wp-json/wp/v2/user/{posts[3].author}/avatar

# Sites 

# Assumes REST API was customized to show
# The "Sites Custom Taxonomy" IDs on the 
# Post endpoint

HTTP GET 
/wp-json/wp/v2/site/{posts[0].sites[0]}
/wp-json/wp/v2/site/{posts[1].sites[0]}
/wp-json/wp/v2/site/{posts[2].sites[0]}
/wp-json/wp/v2/site/{posts[3].sites[0]}

# Featured Images

HTTP GET
/wp-json/wp/v2/media/{posts[2].featured_media}
/wp-json/wp/v2/media/{posts[3].featured_media}

Comparing APIs

            
 query { 
  posts(first: 4) {
    edges {
      node {



        














      }
    }
  }
}

            
        author {
       name
       avatar(size: 50) {
         url
       }
     }

            
                        followLink

            
                        title

            
                        featuredImage(width: 300) {
   url
}

            
                        excerpt

            
        site {
       name
       link
     }

Data Requirements:

List of posts
author
- name
- avatar (size: 50)
  - url
site
- name
- link
followLink
title
featuredImage (width: 300)
- url
excerpt

What I've Learned

Designing a Schema is HARD
- Especially when the end-product is unknown
- Relay Schema Spec is fantastic
The GraphQL and WordPress Communities are AMAZING
- Devs from Graph.Cool, Apollo, Coursera, Qz.com, New York Times and more have participated in discussions about WPGraphQL at some level
Tools that have been helpful
- GraphiQL
- Graph.Cool
- Apollo Launchpad

What's Next?

Gatsby hired me to help make WPGraphQL the best API for WordPress, regardless of client
- Gatsby is investing in WordPress
- Gatsby doesn't want to replace WordPress, but enhance it