GraphQL

 

Gustav Jorlöv

KITS AB

AWS

Frontend

Namngivning

Klättring

Mountainbike

CSS

GraphQL

Node.JS

IoT

Serverless

Links

Agenda

  1. History
  2. Query Language
  3. Schema
  4. Overview
  5. Server
  6. Tooling
  7. Wrap up

History

Facebook Mobile

...history lesson on youtube

Open Source

Production

ready

2012

2013

2014

2015

2016

2017

2018

2019

2020

Public

GraphQL

Foundation

Query Language

{
  me: {
    name: "Gustav"
  }
}
{
  me {
    name
  }
}

Query Language

{
  me: {
    name: "Gustav",
    employer: {
      name: "KITS AB",
      city: "Göteborg"
    }
  }
}
{
  me {
    name
    employer {
      name
      city
    }
  }
}
{
  employee(id: "17") {
    name
    employer {
      name
      city
    }
  }
}
{
  employee: {
    name: "Gustav",
    employer: {
      name: "KITS AB",
      city: "Göteborg"
    }
  }
}

Query Language

{
  me: {
    name: "Gustav",
    employer: {
      name: "KITS AB",
      city: "Göteborg"
    }
  }
}
{
  me {
    name
    employer {
      name
      city
    }
  }
}

Aliases

{
  me {
    name
    job: employer {
      name
      town: city
    }
  }
}
{
  employee: {
    name: "Gustav",
    job: {
      name: "KITS AB",
      town: "Göteborg"
    }
  }
}

Query Language

{
  employee: {
    name: "Gustav"
  }
}
query TheEmployee($id: ID){
  employee(id: $id) {
    name
  }
}

Variables

{
  id: "17"
}

Star Wars

Schema

type Employee {
  id: ID!
  name: String!
  skills: [Skill]
  employer: Company
}

type Query {
  me: Employee
  employee(id: ID!): Employee
}
type Skill {
  id: ID!
  subject: String
}

type Company {
  id: ID!
  name: String!
  city: String
}

Capabilities

Database Structure

Docs

Comments on types, fields, arguments

"Describes people at the company"
type Employee {
  id: ID!
  "First and Last name"
  name: String!
  skills: [Skill]
  employer: Company
}

type Query {
  me: Employee
  employee(
    "Employee ID"
    id: ID!
  ): Employee
}

Overview

Parse

Validate

Execute

Plain

Old

Code

resolvers.js

employees

companies

{
  me {
    name
  }
}

Resolvers

const resolvers = {
  Query: {
    me: (object, args, context) => {
      // context holds info about logged in user
      // make HTTP request to REST service 🥳
    },
    employee: (object, args, context) => {
      // args.id === "17"
      return {id: "17", name: "Gustav"}
    }
  }
}
const resolvers = {
  Query: {
    me: (object, args, context) => {
      // context holds info about logged in user
      // make HTTP request to REST service 🥳
    },
    employee: (object, args, context) => {
      // args.id === "17"
      return {id: "17", name: "Gustav"}
    }
  },
  Employee: {
    employer: (object, args, context) => { 
      // object holds info about "parent" object
      return getEmployerByEmployee(object.id)
    }
  }
}
type Employee {
  id: ID!
  name: String!
  skills: [Skill]
  employer: Company
}

type Query {
  me: Employee
  employee(id: ID!): Employee
}

type Skill {
  id: ID!
  subject: String
}

type Company {
  id: ID!
  name: String!
  city: String
}
const resolvers = {
  Query: {
    me: (object, args, context) => {
      // context holds info about logged in user
      // make HTTP request to REST service 🥳
    },
    employee: (object, args, context) => {
      // args.id === "17"
      return {id: "17", name: "Gustav"}
    }
  },
  Employee: {
    employer: (object, args, context) => { 
      // object holds info about "parent" object
      return getEmployerByEmployee(object.id)
    },
    skills: (object, args, context) => { 
      // object holds info about "parent" object
      return getSubjectsByEmployee(object.id)
    }
  }
}

Schema

Batch && Cache

POST /graphql

POST /rest/id/...

user(id:"17") {
  friends {
    friends {
      friends {
        name
      }
    }
  }
}

Tooling

Pros / Cons

  • Under & over fetching
  • Tooling
  • Documentation
  • IDE integration
  • Move complexity
  • No versions
  • New things to learn
  • One more moving part

Companies

More

  • Subscriptions
  • Persisted queries
  • Analytics
  • Edges and Nodes
Made with Slides.com