GraphQL

GraphQL - "Ask me what you want"

 

 

 

Rigin Oommen

Software Engineer

PnT DevOps & Customer Platform

AGENDA

 

  1. What is GraphQL
  2. Need of GraphQL
  3. GraphQL Ecosystem
  4. Schema Definition Language
    1. Data Types
    2. Operations
  5. Demo

 

 

 

 

WHAT IS GRAPHQL

2012

2015

Created GraphQL

 

Query language for API’s with a runtime environment for fulfillment. Designed to build efficiently by providing an intuitive and flexible syntax for describing the data requirement.

Why we need GraphQL

0
 Advanced issues found
 
TEAM.NAME
USER.NAME

POST.LIKES
TEAM.NAME
USER.NAME

POST.LIKES
TEAM.NAME
USER.NAME

POST.LIKES
# Data sources
- Users, Posts, Team

GET /users
GET /posts
GET /teams
....................................................
GET /users
GET /posts
GET /teams
....................................................
GET /users
GET /posts
GET /teams
....................................................

REST

WEB UI

# RESPONSE
GET /users [{
    "name": "Paul"
    "age" : 27
  },{
    "name": "Thomas"
    "age" : 21
 }]

GET /posts    [{
    "likes": 40
    "shares" : 22
  },{
    "likes": 12
    "shares" : 20
 }]

GET /teams    [{
    "name": "Development"
  },{
    "name": "Customer Service"
 }]

Cons with REST

  • Multiple round trips.
  • Over-fetching & Under fetching of data.
  • In-efficient API management
  • Code Maintenance
  • Duplicate efforts 
TEAM.NAME
USER.NAME

POST.LIKES
TEAM.NAME
USER.NAME

POST.LIKES
TEAM.NAME
USER.NAME

POST.LIKES
# Data sources
- Users, Posts, Team

# REQUEST
query ListDetails {
  listUsers {
    name
  }
  
  listPosts {
   likes
  }
  
  listTeams {
    name
  }
}

GraphQL

WEB UI

# RESPONSE
{
  "data": {
    "listUsers": [{
        "name": "Paul"
     },{
        "name": "Thomas"
     }],
    "listPosts": [{
         "likes": 40,
     },{
         "likes": 12
     }],
    "listTeams": [{
         "name": "Development"
     },{
         "name": "Customer Service"
     }]
  }
}

Pros with GraphQL

  • Improved performance & Security
  • Auto API Documentation
  • Effective error handling
  • Validation and type checking
  • Version free
  • Effective Code Maintenance
  • SIngle Endpoint

GraphQL Ecosystem

Client

GraphQL Client

Server

GraphQL Server

Data

Database to GraphQL Server

GraphQL Gateway

Receives queries from the client and responds with data

eg. GraphQL Yoga, Apollo Server, express-graphql

Libraries that construct queries and send them to the server.

eg. Apollo Client, Relay

Connecting the database and the GraphQL server.


Additional features to find issues with your API much faster and improve performance.

eg. Apollo Engine

Schema Definition Language (SDL)

0
 Advanced issues found
 

GraphQL way for defining the types is called Schema Definition Language (SDL)

GraphQL Types

  1. Scalar Types
  2. Enumeration Types

Operation Types

  1. Queries
  2. Mutations
  3. Subscriptions
  4. Fragments
  5. Alias

GraphQL Types

enum Book {
  FICTION
  CLASSICS
  HISTORY
}
type BookList {
    book: String
    id: Int
    active: Boolean
    date: DateTime
}
  • Scalar Types

    • Common Data types are included .
      • eg: String, Int, Float, Boolean, DateTime
    • ​Custom Scalars are supported.

 

 

 

  • Enumeration Types

    • ​Restricted to a particular set of inputs.

 

Operation Types

QUERY

  • Analogous to GET operation in REST.

  • Asks server what they need

  • Used to read/fetch data.

# Request
query TeamInfo {
    listTeams {
        name
        mailingList
        url
        manager {
            name
            email
        }
    }
}
# Response
{
  "data": {
    "listTeams": [
      {
        "name": "Sales",
        "mailingList": "sales@gmail.com",
        "url": "sales",
        "manager": {
          "name": "William Tuck",
          "email": "wtuck@gmail.com"
        }
      },
      { ...}
      ]
    }
}

MUTATION

  • Analogous to POST/PUT/DELETE operations in REST.

  • Used to modify data.

# Request
mutation AddTeamData{
  addTeam(input: { name: "Operations" }) {
    name
  }
}
# Response
{
  "data": {
    "addTeam": {
      "name": "Operations"
    }
  }
}

SUBSCRIPTION

  • Allows server to send data to clients when event happens

  • Inbuilt support for websockets.

# Request
subscription TeamAdded {
  teamAdd {
    name
  }
}

EVENT

# Response
{
  "data": {
    "addTeam": {
      "name": "Operations"
    }
  }
}

Query/Mutation

FRAGMENTS

fragment TeamFragment on Team {
  name
  url
}

query team {
  team(name: "hr") {
    ...TeamFragment
  }
}
  • Reusable piece of code

ALIAS

  • Used to fetch data/field in different name
query Profile {
  userList:listUsers {
    name
  }
  persons:listUsers {
    fullName:name
    age
  }
}
{
  "data": {
    "userList": [{
        "name": "Rigin"
      }, {...}
    ],
    "persons": [{
        "fullName": "Rigin",
        "age": 20
      }, {...}
    ]
  }
}

Tools

Supports

Users

REFERENCES

QA