Introduction

to GraphQL

June 8-9, 2020

Who Am I?

  • Software Engineer at Gatsby
  • Denver Native
  • WordPress developer for 10+ years
  • Creator & maintainer of WPGraphQ
  • ​Favorite Type of Food: Mexican 🌮 🌯
  • Hobby outside of work: ​I love to play/coach Soccer

Overview

  • Class Intros
  • Intro to GraphQL
  • Building a GraphQL Schema
  • Querying GraphQL APIs
  • Thinking in Graphs
  • Building an application

Intros

  • Name
  • How long at Starbucks
  • Role at Starbucks
  • Level of Experience with GraphQL
  • One thing you hope to learn in this workshop
  • Favorite type of food
  • One hobby outside of work

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

  • Specification, Many Implementations
  • Tooling
  • Performance
  • Client controls the model
  • Query Many resources in a single request
  • Get exactly what you need, no over-under fetching
  • Coupling of Concerns

GraphQL

GraphQL

Specification with many implementations

Many, many, many more...

GraphQL

Graph != Graph Databases

Graph != Graph Search

Graph = Application Data Graph

QL = Query Language

GraphQL: A Query Language for Your Application Data Graph

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

A Blog 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

Why GraphQL Exists

Why GraphQL Exists

  • Coupling of concerns
  • Efficient Data Fetching

Why GraphQL Exists

Stateless Web Flow

Why GraphQL Exists

Stateful Web Flow

Why GraphQL Exists

Why GraphQL Exists

Separation of Concerns

Model

View

Controller

Why GraphQL Exists

Separation of Concerns

HTML

JavaScript

CSS

Why GraphQL Exists

Coupling Concerns

HTML

JavaScript

CSS

HTML

JavaScript

CSS

HTML

JavaScript

CSS

Why GraphQL Exists

HTML

JavaScript

CSS

Data

HTML

JavaScript

CSS

Data

HTML

JavaScript

CSS

Data

Coupling Concerns

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

# 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 

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

Benefits of GraphQL

  • Performance:
    • REST: https://denverpost.com/wp-json/wp/v2/posts?per_page=100
    • GraphQL: https://denverpost.com/graphql?query={posts(first:100){nodes{id,title,date,link}}}
  • 👇 We'll circle back to these 👇
  • Self Documenting 
  • Introspection (Schema is Queryable)
  • Tooling
    • GraphQL Faker
    • GraphQL Voyager
    • GraphQL Docs
    • GraphiQL

LET'S CODE!

  • GraphQL Query and Mutation Types

  • GraphQL Scalar Types

  • GraphQL Object Types and Fields

  • GraphQL Enum Types

  • GraphQL Arguments

  • GraphQL Input Objects

  • GraphQL Interfaces

  • GraphQL Unions

  • GraphQL Custom Scalars

Building a GraphQL Schema

  • GraphQL Operation Names
  • GraphQL Arguments

  • GraphQL Variables

  • GraphQL Aliasing

  • GraphQL Fragments

  • GraphQL Directives

  • GraphQL Introspection

Querying GraphQL APIs

  • Connections / Edges / Nodes
    • Pagination
    • Edges
  • Input Objects
  • Mutation Payloads
  • Versioning Schemas

Thinking in Graphs

Connections

Team

User

User

User

Team

name

"Maintainers"

name

"Admin"

name

"Dana"

name

"Jason"

name

"Kyle"

User

name

"Laurie"

Relational Data

{
  teams {
    name
    members {
      name
    }
  }
}

Connections

Team

User

User

User

Team

name

"Maintainers"

name

"Admin"

name

"Dana"

name

"Jason"

name

"Kyle"

User

name

"Laurie"

role

"MEMBER"

role

"MAINTAINER"

Connections

{
  teams {
    name
    members {
      name
    }
  }
}
{
  teams {
    edges {
      nodes {
        id
        name
        members {
          edges {
            role
            nodes {
              id
              name
            }
          }
        }
      }
    }
  }
}

Intro to GraphQL

By Jason Bahl

Intro to GraphQL

Introduction to GraphQL

  • 103
Loading comments...

More from Jason Bahl