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
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
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
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
Demo Time!
Comparing APIs
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
Desert GraphQL Oct 2019
By Jason Bahl
Desert GraphQL Oct 2019
GraphQL for WordPress
