Introduction to GraphQL

- Saad Abbasi

About Me

I ❤️

Mentor

Techkaro

NgGirls

Dawood UET

Speaker

JS Dive

JS Meetup

React KHI

GraphQL

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. 

It 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.

- graphql.org

Timeline

2012

Development started

2015

Open-Sourced

by facebook

Present

Evolving Specifications

First MeetUp in London

2016

But wait, Why?

Mobile Native Team

To save Internet Bandwidth

Declarative about data

Instant data, less loadings 🌀

Saves from overfetching and underfetching

GraphQL is better

(way of doing)

REST.

GraphQL was created to coup up with

need for more flexibility and efficiency

in client-server communication. 

GraphQL

flexibility

efficiency

HTML

CSS

JavaScript

API Data

800ms

500ms

1700ms

600ms

~3.6 sec

(Still a good figure for SPA)

Static hosting

Assets Bucket

API Server

Browser

Client-Side Rendered SPA

HTML/CSS

JavaScript

API Data

600ms

400ms

600ms

~1.6 sec

is Actually good

Treeshaking

Bundle Optimising

GZip

Lazy Loading

???

Optimisation techniques

SSR

CDNs

SW-Caching

Inline Critical CSS

RESTful

GraphQL

https://some.apis/foodies/2

// response
{
    id: 2,
    username: "jdoe99",
    email: "jdoe99@example.com",
    contact: "09001234567",
    fullname: "John Doe",
    firstname: "John",
    lastname: "Doe",
    address: {
        city: "Karachi",
        street: "Example street",
        home: "000 floor, example etc apartments",
        postal: 12377
    },
    education: {
        degree: "Masters in Computer Security",
        university: "SUCS",
        year: 2018,
        grade: "A",
        record: "clear",
    },
    active: true,
    favourites: ["Cheese Burgers", "Sandwiches"],
    reviews: [
        {
            food: "009ancz8z81",
            rating: 2,
            createdAt: "2018-11-05T13:15:30",
            updatedAt: "2018-11-05T13:15:35",
            review: "worst food ever,"
        },
        {
            food: "009ancz8z82",
            rating: 5,
            createdAt: "2018-11-05T13:15:30",
            updatedAt: "2018-11-05T13:15:35",
            review: "Loved it, great McD"
        },
        {
            food: "009ancz8z83",
            rating: 3,
            createdAt: "2018-11-05T13:15:30",
            updatedAt: "2018-11-05T13:15:35",
            review: "Was just ok, liked it."
        },
    ]
}
// response
{
    id: 2,
    fullname: "John Doe",
    address: {
        home: "000 floor, example etc apartments"
    },
    active: true,
    favourites: ["Cheese Burgers", "Sandwiches"],
    reviews: [
        {
            review: "Loved it, great McD"
        },
        {
            review: "Was just ok, liked it."
        },
    ]
}
query {
    getFoodie(id: 2) {
        id
        fullname
        active
        address {
            home
        }
        reviews(last: 2) {
            review
        }
    }
}

HTML/CSS

JavaScript

API Data

600ms

400ms

140ms

~1.14 sec 😱

SSR

CDNs

Treeshaking

Bundle Optimising

GZip

Lazy Loading

GraphQL

queries

Found the missing part

SW-Caching

Inline Critical CSS

Let's

Dive into GraphQL

GraphQL

In Action

const server = new ApolloServer({ resolvers, typeDefs });

GraphQL

Server

schema.graphql
mutation
query
subscription
resolvers
typedefs
(apollo-server-express)
https://some.api
const resolvers = {
 Mutation: {
    updateFoodieName: (root, args = {}, ctx, info) => {
        const { _id, name } = args;
        return ctx.foodieModel.updateById(_id, {name})
    }
 },


 Query: {
    getFoodies: (root, args = {}, ctx, info) => {
        return ctx.foodieModel.find(args) 
    }
 },
};
// SDL - Schema Definition Language

type Query {
    getFoodies(name: String, _id: ID): [Foodie!]
}

type Mutation {
    updateFoodieName(_id: ID!, name: String!): Foodie!
}

type Foodie {
    _id: ID,
    name: String
    updatedAt: String
}

typedefs (schema.gql)

  • Registry for ops and types
  • could be named anything
  • SDL - Schema Definition Language

 

resolver

  • should have same ops as typedefs
  • query is for read and mutation is for write
  • subscriptions - are not being discussed here

Architectural Overview

GraphQL server with connected database

- image credits: howtographql.com

GraphQL

Server

schema.graphql
mutation
query
resolvers
typedefs

GraphQL server integration with existing systems

GraphQL

Server

schema.graphql
mutation
query
resolvers
typedefs
https://legacy-system.com/
https://realtime-platform

GraphQL server with hybrid approach

GraphQL

Server

schema.graphql
mutation
query
subscription
resolvers
typedefs
https://legacy-system.com/

DEMO

Topics i did not cover...

Inner resolvers

Optimistic UI updates

Batching and caching

Data loaders

Root, context and info args

Schema stitching

Testing graphql

Error handling

Optimising resolvers

Developer tooling

Unions and Interfaces

...

THAT'S IT

ANY QUESTIONS ?

{linkedin | github | twitter}/isaadabbasi

Introduction to GraphQL

By Saad Abbasi

Introduction to GraphQL

  • 199