WPGraphQL

Interacting with WordPress Data in a new way

Agenda

  • What is GraphQL?
  • WordPress as an Application Data Graph
  • Using WPGraphQL
  • Building a Gutenberg Block with GraphQL

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

{
     me {
          name
     }
}

{

     data: {

          me: {

               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: "...") {
    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

WordPress as an Application Data Graph

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

Contributors

How to use GraphQL with WordPress

Posts

Pages

Users

Comments

Terms

Media

Adding the Plugin to WordPress

Install & Activate the Plugin

https://playground.wpgraphql.com

Building Gutenblocks with WPGraphQL

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

Post Title

Post Featured Image Url

Post Author Avatar Url

Post Author First & Last Name

Post Tags (names)

Post ID

  • posts
    • id
    • title
    • date
    • author
      • avatar
        • url
    • featuredImage
      • url
    • tags
      • id
      • name
  • posts
    • id
    • title
    • date
    • featuredImage
      • url
    • author
      • avatar
        • url
    • tags
      • id
      • name
{
  posts {
    nodes {
      id
      title
      date
      featuredImage {
        sourceUrl
      }
      author {
        firstName
        lastName
        avatar(size: 50) {
          avatarUrl: url
        }
      }
      tags {
        tagNodes: nodes {
          id
          name
        }
      }
    }
  }
}