rethinking data with

GraphQL

@ryanchenkie

ryan chenkie

angular/node consultant

google developer expert

angularcasts.io

ryanchenkie.com

let's
talk
about

 

REST

some downsides

  • Fairly rigid
  • Endpoints are all or nothing
  • Separate HTTP calls
  • Data isn’t cached
  • Some agreed-upon patterns, but nothing explicit
  • Gets messy as the API grows
  • Hard to debug

what if we could...

Let clients ask for what they need and want

Make one API call instead of many

Make our APIs versionless

Make our API expose functions instead of endpoints

with
graphql
we can

let's look at queries






query {
  allCourses {
    id
  }
}
{
  "data": {
    "allCourses": [
      {
        "id": "1"
      },
      {
        "id": "2"
      },
      {
        "id": "3"
      }
    ]
  }
}





query {
  allCourses {
    id
    name
    description
  }
}
{
  "data": {
    "allCourses": [
      {
        "id": "1",
        "name": "Functional JavaScript",
        "description": "Because FUN"
      },
      {
        "id": "2",
        "name": "Intro to HTML",
        "description": "Start somewhere"
      },
      {
        "id": "3",
        "name": "Intro to Machine Learning",
        "description": "Learn machines"
      }
    ]
  }
}





query {
  Course(id: 1) {
    id
    name
    description
  }
}






{
  "data": {
    "Course": {
      "id": "1",
      "name": "Functional JavaScript",
      "description": "Because FUN"
    }
  }
}




query {
  firstStudent: Student(id: 4) {
    id
    firstName
    lastName
  }
  lastStudent: Student(id: 5) {
    id
    firstName
    lastName
  }  
}



{
  "data": {
    "firstStudent": {
      "id": "4",
      "firstName": "John",
      "lastName": "Doe"
    },
    "lastStudent": {
      "id": "5",
      "firstName": "Jane",
      "lastName": "Smith"
    }
  }
}


query {
  Student(id: 4) {
    id
    firstName
    lastName
    Courses {
      ...course
    }
  }
}

fragment course on Course {
  id
  name
  level
}
{
  "data": {
    "Student": {
      "id": "4",
      "firstName": "John",
      "lastName": "Doe",
      "Courses": [
        {
          "id": "1",
          "name": "Functional JavaScript",
          "level": "200"
        },
        {
          "id": "2",
          "name": "Intro to HTML",
          "level": "100"
        }
      ]
    }
  }
}

demo

going
beyond

queries

servers require schemas

github.com/marmelab/json-graphql-server

bit.ly/rethinking-data-graphql

thank you!

@ryanchenkie

ryanchenkie.com

Rethinking Data with GraphQL

By Ryan Chenkie

Rethinking Data with GraphQL

  • 1,206