WPGraphQL

Contributor Day

GraphQL

A Query Language for your API

GraphQL is a query language for APIs and a runtime for fulfilling those
queries with your existing data. GraphQL provides a complete
and understandable description of the data in your API, gives
clients the power to ask for exactly what they need
and nothing more, makes it easier to evolve APIs over time,
and enables powerful developer tools

https://graphql.org

GraphQL

Graph != Graph Databases

Graph != Graph Search

Graph = Application Data Graph

QL = Query Language

GraphQL: A Query Language for Your Application Data Graph

GraphQL

Post

CoAuthor

Post

Featured

Image

title

"Hello World"

title

"GoodBye Mars"

Avatar

name

"jane doe"

name

"sue smith"

name

"john doe"

GraphQL

GraphQL lets us pick trees out of the Application Data Graph

GraphQL

query {
  post(id: "...") {
    title
    link
    coauthors {
      name
    }
  }
}

{
  data: {
    post: {
      title: "Hello World!"
      link: "http://site.com/hello-world"
      coauthors: [
        {
          name: "John Doe",
        },
        {
          name: "Jane Smith",
        }
      ]
    }
  }
}

GraphQL

Post

CoAuthor

Post

Featured

Image

title

"Hello World"

title

"GoodBye Mars"

Avatar

name

"jane doe"

name

"sue smith"

name

"john doe"

GraphQL

GET /post/:id

{
  "id": 38424,
  "date": "2017-08-09T13:39:18",
  "date_gmt": "2017-08-09T18:39:18",
  "guid": {
    "rendered": "https://example.com/?p=38424"
  },
  "modified": "2017-08-10T17:16:57",
  "modified_gmt": "2017-08-10T22:16:57",
  "slug": "publish-conference-pictures",
  "status": "publish",
  "type": "post",
  "link": "https://example.com/publish-conference-pictures/",
  "title": {
    "rendered": "The Bookshop, by Penelope Fitzgerald"
  },
  "content": {
    "rendered": "<p>I am very much enjoying...Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>\n<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>\n<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.</p>\n<p>
Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.</p>\n<p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.</p>\n<p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.</p>\n<p>Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.</p>\n<p>Objectively innovate empowered manufactured products whereas parallel platforms. Holisticly predominate extensible testing procedures for reliable supply chains. Dramatically engage top-line web services vis-a-vis cutting-edge deliverables.</p><p>Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing. Holistically pontificate installed base portals after maintainable products.</p><p>Phosfluorescently engage worldwide methodologies with web-enabled technology. Interactively coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue scalable customer service through sustainable potentialities.</p>",
    "protected": false
  },
  "excerpt": {
    "rendered": "<p>I am very much enjoying...Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>\n",
    "protected": false
  },
  "author": 1,
  "featured_media": 38425,
  "comment_status": "open",
  "ping_status": "closed",
  "sticky": false,
  "template": "",
  "format": "standard",
  "meta": [

  ],
  "categories": [
    6,
    196
  ],
  "tags": [
    178
  ],
  "_links": {
    "self": [
      {
        "href": "https://example.com/wp-json/wp/v2/posts/38424"
      }
    ],
    "collection": [
      {
        "href": "https://example.com/wp-json/wp/v2/posts"
      }
    ],
    "about": [
      {
        "href": "https://example.com/wp-json/wp/v2/types/post"
      }
    ],
    "author": [
      {
        "embeddable": true,
        "href": "https://example.com/wp-json/wp/v2/users/1"
      }
    ],
    "replies": [
      {
        "embeddable": true,
        "href": "https://example.com/wp-json/wp/v2/comments?post=38424"
      }
    ],
    "version-history": [
      {
        "href": "https://example.com/wp-json/wp/v2/posts/38424/revisions"
      }
    ],
    "wp:featuredmedia": [
      {
        "embeddable": true,
        "href": "https://example.com/wp-json/wp/v2/media/38425"
      }
    ],
    "wp:attachment": [
      {
        "href": "https://example.com/wp-json/wp/v2/media?parent=38424"
      }
    ],
    "wp:term": [
      {
        "taxonomy": "category",
        "embeddable": true,
        "href": "https://example.com/wp-json/wp/v2/categories?post=38424"
      },
      {
        "taxonomy": "post_tag",
        "embeddable": true,
        "href": "https://example.com/wp-json/wp/v2/tags?post=38424"
      },
      {
        "taxonomy": "yst_prominent_words",
        "embeddable": true,
        "href": "https://example.com/wp-json/wp/v2/yst_prominent_words?post=38424"
      }
    ],
    "curies": [
      {
        "name": "wp",
        "href": "https://api.w.org/{rel}",
        "templated": true
      }
    ]
  }
}

GET /users/1

{

  "id": 1,
  "name": "Jane Doe",
  "url": "https://example.com",
  "description": "I'm a WordPress developer from Birmingham, Alabama. I'm the creator and editor of Post Status.",
  "link": "https://poststatus.com/profiles/brian-krogsgard/",
  "slug": "jane-doe",
  "avatar_urls": {
    "24": "https://secure.gravatar.com/avatar/6b89515a9781282ae3a66d4b6173523c?s=24&d=mm&r=g",
    "48": "https://secure.gravatar.com/avatar/6b89515a9781282ae3a66d4b6173523c?s=48&d=mm&r=g",
    "96": "https://secure.gravatar.com/avatar/6b89515a9781282ae3a66d4b6173523c?s=96&d=mm&r=g"
  },
  "meta": [
    
  ],
  "_links": {
    "self": [
      {
        "href": "https://poststatus.com/wp-json/wp/v2/users/1"
      }
    ],
    "collection": [
      {
        "href": "https://poststatus.com/wp-json/wp/v2/users"
      }
    ]
  }
}

GET /users/2

{

  "id": 2,
  "name": "John Doe",
  "url": "https://example.com",
  "description": "I'm a WordPress developer from Birmingham, Alabama. I'm the creator and editor of Post Status.",
  "link": "https://poststatus.com/profiles/brian-krogsgard/",
  "slug": "john-doe",
  "avatar_urls": {
    "24": "https://secure.gravatar.com/avatar/6b89515a9781282ae3a66d4b6173523c?s=24&d=mm&r=g",
    "48": "https://secure.gravatar.com/avatar/6b89515a9781282ae3a66d4b6173523c?s=48&d=mm&r=g",
    "96": "https://secure.gravatar.com/avatar/6b89515a9781282ae3a66d4b6173523c?s=96&d=mm&r=g"
  },
  "meta": [
    
  ],
  "_links": {
    "self": [
      {
        "href": "https://poststatus.com/wp-json/wp/v2/users/1"
      }
    ],
    "collection": [
      {
        "href": "https://poststatus.com/wp-json/wp/v2/users"
      }
    ]
  }
}

5,460 bytes

819 bytes

(sample payloads from poststatus.com)

GraphQL

query {
  post(id: "...") {
    title
    link
    coauthors {
      name
    }
  }
}

{
  data: {
    post: {
      title: "Hello World!"
      link: "http://site.com/hello-world"
      coauthors: [
        {
          name: "John Doe",
        },
        {
          name: "Jane Smith",
        }
      ]
    }
  }
}

231 bytes

GraphQL

REST

3 network requests
Bytes Downloaded: 7,240
Lots of consumer transformation needed

GraphQL

1 network request
Bytes Downloaded: 231
No consumer transformation needed

WPGraphQL

A Query Language for your WordPress API

GraphQL

A Query Language for your API

https://graphql.org

WPGraphQL is an extendable open-source WordPress plugin that brings the power of GraphQL to your WordPress install. WPGraphQL defines GraphQL Types for core WordPress entities, such as posts, terms and users, and defines core entry points into the WordPress Application Data Graph via GraphQL Queries and Mutations. WPGraphQL gives clients the power to ask for exactly what they need from WordPress and enables powerful developer tools.

https://wpgraphql.com

https://github.com/wp-graphql/wp-graphql

WPGraphQL Queries & Mutations

via remote network requests

WPGraphQL Queries

in your plugin or theme