GraphQL

High level Overview

Starting point: REST

Frontend

Requests

Backend API

Resources

GET /users

GET /addresses

GET /orders

REST Limitations

Overfetching

Backend API

Frontend

GET /users

Requirement: Add a dropdown with all first names

<<Response>>

we just care about this

REST Limitations

Overfetching

Requirement: Add a dropdown with all first names

Select a User

Russel

Yasmeen

REST Limitations

Underfetching

Backend API

Frontend

Requirement: Create a list of users and their address

GET /users

<<Response>>

GET /addresses

<<Response>>

REST Limitations

Underfetching

Requirement: Create a list of users and their address

Russel  Rogahn

03793 Jones Spring

Bethlehem, South Carolina

 

Yasmeen Welch

862 Bogisich Shoal

Lucindashire, Nabraska

 

GraphQL

Server Concern

Frontend Concern

GraphQL

Ask for what you want

GraphQL

HTTP

 REST 

GraphQL

GET

POST

PUT

DELETE

POST

Russel  Rogahn

03793 Jones Spring

Bethlehem, South Carolina

 

Yasmeen Welch

862 Bogisich Shoal

Lucindashire, Nabraska

 

GraphQL

Ask for what you want

POST /graphql

<<Response>>

Backend API

Frontend

query {
 users {
  firstName
  lastName,
  address {
   street
   city
   state
  }
 }
}
[
  {
    "firstName": "Russell",
    "lastName": "Rogahn",
    "address": {
      "street": "03793 Jones Spring",
      "city": "Bethlehem",
      "state": "South Carolina"
    }
  },
  {
    "firstName": "Yasmeen",
    "lastName": "Welch",
    "address": {
      "id": 4,
      "street": "862 Bogisich Shoal",
      "city": "Lucindashire",
      "state": "Nebraska"
    }
  }
]

Russel  Rogahn

03793 Jones Spring

Bethlehem, South Carolina

 

Yasmeen Welch

862 Bogisich Shoal

Lucindashire, Nabraska

 

Query:

Result:

Ask for what you want

GraphQL

Automatic documentation

GraphQL

Basic usage

Queries (GET)

Mutations (POST, PUT/PATCH, DELETE)

Subscriptions (Websockets)

Queries

Usage

<<Response>>

{
  "data": {
    "hero": {
      "name": "R2-D2",
      "friends": [
        {
          "name": "Luke Skywalker"
        },
        {
          "name": "Han Solo"
        },
        {
          "name": "Leia Organa"
        }
      ]
    }
  }
}
query {
  hero {
    name
    friends {
      name
    }
  }
}

POST /graphql

Queries with arguments

Usage

<<Response>>

{
  "data": {
    "human": {
      "name": "Luke Skywalker",
      "height": 1.72
    }
  }
}
query {
  human(id: "1000") {
    name
    height
  }
}

POST /graphql

Queries with sub arguments

Usage

<<Response>>

{
  "data": {
    "human": {
      "name": "Luke Skywalker",
      "height": 5.6430448
    }
  }
}
query {
  human(id: "1000") {
    name
    height(unit: FOOT)
  }
}

POST /graphql

Mutations

Usage

<<Response>>

{
  "data": {
    "link": {
      "id": "link-1",
      "description": "Cool Website"
    }
  }
}
mutation {
  link(url: "www.popmenu.com", description: "Cool Website") {
    id
    description
  }
}

POST /graphql

Subscriptions

Usage

Backend API

Client 1

Client 2

Subscribe to Restaurant

Update Restaurant

Update Menu

Client 3

Subscribe to Restaurant

Update Restaurant

Subscribe to Menu

POST /graphql

mutation {
  updateRestaurant() {
	...
  }
}

POST /graphql

mutation {
  updateMenu() {
	...
  }
}

Demo Time

GraphQL Intro

By genuchelu

Made with Slides.com

GraphQL Intro

  • 234

More from genuchelu