Introduction to GraphQL and Hasura

@aleksandrasays

whoami?

Tech Lead at Hasura

Twitter: @aleksandrasays

GitHub: @beerose

Blog: aleksandra.codes

Agenda

@aleksandrasays

Introduction to GraphQL
What is Hasura?

@aleksandrasays

Introduction to GraphQL

@aleksandrasays

1. Fetching data

@aleksandrasays

REST API call

App

API

GET api/users

GET api/tasks/user_id=1

{
  users: [
    {
      id: 1,
      name: "Jon",
      surename: "Doe"
    }
  ]
}

GET api/tasks/user_id=1

{
  tasks: [
    {
      name: "Learn GraphQL",
      completed: false,
    }
  ]
}

@aleksandrasays

REST API call

App

API

GET api/users/user_id=1

GET api/tasks/user_id=1

GET api/tasks/user_id=1

GET api/users/details/user_id=1

GET api/tasks/details/task_id=1

Problem: four API calls

@aleksandrasays

REST API call

GET api/users/user_id=1

GET api/tasks/user_id=1

GET api/user_info/user_id=1

GET api/users/details/user_id=1

GET api/tasks/details/task_id=1

Solution: new ednpoints

GET api/tasks_info/user_id=1

@aleksandrasays

REST API call

Problem: different data on different views

example.com/user/1

example.com/users/summary

All users

Profile

pic

User data

More user data

@aleksandrasays

REST API call

Solution: specify fields in API call

GET api/user_info/user_id=1&fileds=name&fileds=profile_pic

@aleksandrasays

REST API call

Problem: we want only tasks in progress

example.com/tasks/in_progress

Tasks in progress

Learn GraphQL

@aleksandrasays

REST API call

Solution: add filter to query parameters

GET api/tasks_info/filter.status=in_progress

@aleksandrasays

GraphQL API call

App

API

query {
  users(id: 1) {
    name
    surename
  }
}

{
  "users": [
    {
      "name": "Jon",
      "surename": "Doe",
    }
  ]
}

query {
  users(id: 1) {
    name
    surename
  }
}

@aleksandrasays

GraphQL API call

App

API

query {
  users(id: 1) {
    name
    surename
    tasks(user_id: 1) {
      name
      status
    }
  }
}

{
  "users": [
    {
      "name": "Jon",
      "surename": "Doe",
      "tasks": [
        {
          "name": "Learn GraphQL",
          "status": "in_progress"
        }
      ]
    }
  ]
}

@aleksandrasays

GraphQL API call

App

API

query {
  users(id: 1) {
    name
    surename
    tasks(user_id: 1, 
     status: "completed") {
      name
      status
    }
  }
}

{
  "users": [
    {
      "name": "Jon",
      "surename": "Doe",
      "tasks": []
    }
  ]
}

@aleksandrasays

Data models are a graph

User 1

Task 1

Task 2

Tag 1

Tag 2

Tag 3

query {
  user(id: 1) {
    ...
    tasks {
      ...
      tags {
       ...
      }
    }
  }
}

@aleksandrasays

You control data you get

User 1

Task 1

Task 2

Tag 1

Tag 2

query {
  user(id: 1) {
    name
    tasks {
      name
      status
      tags {
       id
      }
    }
  }
}

name

surename

age

status

name

priority

name

priority

status

description

Tag 3

description

@aleksandrasays

REST API

GraphQL API

API

App

GET users/

GET tasks/

GET tags/

API

App

POST graphql/

Body:
{ "query": "query { users {...} }" }

vs

@aleksandrasays

2. Updating data

@aleksandrasays

REST API

App

API

POST api/users/create

{
  "name": "Jon"
}

Status 200

{
  "id": 1
}

POST

PUT

PATCH

DELETE

@aleksandrasays

GraphQL API

App

API

mutation {
  insertTaks(payload: {...}) {
    id
  }
}

mutation {
  insertTaks(payload: {...}) {
    id
  }
}

Status 200

{
  "id": 1
}

@aleksandrasays

3. Real-time API

@aleksandrasays

App

API

REST API

Option #1

Polling

Option #2

Websockets

@aleksandrasays

App

API

GraphQL API

subscribtion {
  tasks {
    id
    status
  }
}

ws://myapi.com/graphql

"tasks": [
  {
    "id": 1,
    "status": "completed"
  }
]

4. Passing parameters

@aleksandrasays

REST API

GET api/users/user_id=1

let userId = user.id;

get(url, { user_id: userId })

@aleksandrasays

GraphQL API

query {
  users(id: 1) {
    name
    surename
  }
}

string

How can we send arguments programatically?

@aleksandrasays

GraphQL API

query {
  users(id: 1) {
    name
    surename
  }
}

string

How can we send arguments programatically?

const query = `query {
  users(id: ${userId}) {
    name
    surename
  }
}`

post(url, { query })

😕

@aleksandrasays

GraphQL API

query {
  users(id: 1) {
    name
    surename
  }
}

string

How can we send arguments programatically?

const query = `query FetchUser($userId: string) {
  users(id: ${userId}) {
    name
    surename
  }
}`

post(url, { query, variables: { userId: user.id } })

5. API docs

@aleksandrasays

REST API

Option #1

Docs are autogenerated

👎 Codegen tools are limited

Option #2

Developer manually creates docs

👎 Easy to get out-of-sync

@aleksandrasays

GraphQL API

Schema is your documentation

User 1

Task 1

Task 2

Tag 1

Tag 2

name

surename

age

status

name

priority

name

priority

status

description

Tag 3

description

type User {
  id: Int!
  name: String!
  surname: String
  age: Int
}

type Task {
  id: Int!
  name: String!
  status: String
  priority: Number
}

type Tag {
  id: String!
  description: String
}

@aleksandrasays

GraphQL API

Introspection API

{ 
  __type(name: "users") {
    name
    fields {
      name
      type {
        name
        kind
        inputFields {
          name
        }
      }
    }
  }
}

{
  "data": {
    "__type": {
      "name": "users",
      "fields": [
        {
          "name": "id",
          "type": {
            "name": "String",
            "inputFields": null,
            "kind": "SCALAR"
          },
        },
        {
          "name": "name",
          "type": {
            "name": "String",
            "inputFields": null,
            "kind": "NON_NULL"
          },
        },
        {
          "name": "created_at",
          "type": {
            "inputFields": null,
            "kind": "NON_NULL"
          },
          "description": null
        },
    }
}

@aleksandrasays

Introduction to GraphQL summary

GET

POST

PUT

PATCH

DELETE

query

GET

mutation

subscription

Introduction to Hasura

@aleksandrasays

What is Hasura?

Open source • GraphQL engine

@aleksandrasays

Realtime GraphQL Engine

@aleksandrasays

GraphQL Queries Compiler

users {
  name
  posts {
    title
    content
    tags {
      name
    }
  }
}

SELECT 
  users.name
  posts.title
  posts.content
  tags.name
FROM 
  users, posts, tags
WHERE
  users.id = posts.author_id,
  posts.id = tags.post_id

@aleksandrasays