Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GraphQL: A Developer-friendly Interface to Data

GraphQL: A Developer-friendly Interface to Data

GraphQL is a data query language and runtime designed and used at Facebook for fetching data in mobile and web apps. It has been in production use since 2012 and has now been open sourced.

GraphQL allows client apps to describe their data requirements in a hierarchical way, which maps well to nested frontend views and provides a more developer-friendly and efficient way to build apps than RESTful APIs.

Presented at HelsinkiJS October 2015.

Ville Immonen

October 13, 2015
Tweet

More Decks by Ville Immonen

Other Decks in Programming

Transcript

  1. Ville Immonen Ville Immonen Co-founder, Reindex Co-founder, Reindex @VilleImmonen @VilleImmonen

    GraphQL: GraphQL: A Developer-friendly A Developer-friendly Interface to Data Interface to Data
  2. GET /events/225873253 { "id": "225873253", "name": "HelsinkiJS October 2015", "description":

    "GraphQL: A Developer-friendly...", ... "links": { "self": "/events/225873253", "group": "/groups/14703552", "rsvps": "/events/225873253/rsvp", "comments": "/events/225873253/comments" } }
  3. GET /events/225873253/comments [ { "comment": "Looking forward to the event!",

    "time": 1441903703000, "likeCount": 3, "links": { "self": "/events/225873253/454556582", "event": "/events/225873253", "member": "/members/13134851" } }, { "comment": "I'd love to participate, but can't make it this time", "time": 1441903713730, "likeCount": 0, "links": { "self": "/events/225873253/comments/454474924", "event": "/events/225873253", "member": "/members/13134851" } }, ... ]
  4. GET /getEvent ?id=225873253 &dataset=eventView { "id": "225873253", "name": "HelsinkiJS October

    2015", "description": "GraphQL: A Developer-friendly...", "group": { ... }, "rsvps": [ ... ], "comments": [ { "comment": "I'd love to participate, but can't make it this time" "time": 1441903713730, "likeCount": 0 "member": { ... } }, ... ] }
  5. GET /getEvent ?id=225873253 &dataset=eventViewV2 { "id": "225873253", "name": "HelsinkiJS October

    2015", "description": "GraphQL: A Developer-friendly...", "group": { ... }, "rsvps": [ ... ], // "comments": [ // { // "comment": "I'd love to participate, but can't make it this time", // "time": 1441903713730, // "likeCount": 0 // "member": { ... } // }, // ... // ] }
  6. GET /getEvent ?id=225873253 &include=group,rsvps,comments,comments.member { "id": "225873253", "name": "HelsinkiJS October

    2015", "description": "GraphQL: A Developer-friendly...", "group": { ... }, "rsvps": [ ... ], "comments": [ { "comment": "I'd love to participate, but can't make it this time" "time": 1441903713730, "likeCount": 0 "member": { ... } }, ... ] }
  7. RESTful RESTful Cache consistency ! Loose coupling ! Multiple round

    trips, slow " Ad-hoc Ad-hoc One request per view, fast ! Tight coupling " No cache consistency "
  8. { event(id: 225873253) { id name description } } {

    "event" { "id": 225873253, "name": "HelsinkiJS October 2015" "description": "GraphQL: A Developer-friendly..." } }
  9. { event(id: 225873253) { id name description group { name

    } rsvps { name introduction } } } { "event" { "id": 225873253, "name": "HelsinkiJS October 2015" "description": "GraphQL: A Developer-friendly..." "group": { "name": }, "rsvps": [{ "name": "Ville Immonen", "introduction": "Building stuff with GraphQL" }], } }
  10. { event(id: 225873253) { id name description group { name

    } rsvps { name introduction } comments { comment time likeCount member { name profilePicture { url } } } } } { "event" { "id": 225873253, "name": "HelsinkiJS October 2015" "description": "GraphQL: A Developer-friendly..." "group": { "name": }, "rsvps": [{ "name": "Ville Immonen", "introduction": "Building stuff with GraphQL" }], "comments" [{ "comment": "I'd love to participate, but can't m "time": 1441903713730, "likeCount": 0 "member": { "name": "John Doe", "profilePicture": { "url": "/i/john.jpg" } } }] } }
  11. { member(id: 13134851) { profilePicture(size: 100) { width height url

    } } } { "member" { "profilePicture": { "width": 100, "height": 75, "url": "/i/john_100x75.jpg" } } }
  12. { member(id: 13134851) { profilePicture(size: 50) { width height url

    } } } { "member" { "profilePicture": { "width": 50, "height": 50, "url": "/i/john_50x50.jpg" } } }
  13. type Event implements Node { comments: [Comment] description: String group:

    Group id: ID! name: String } type Comment { comment: String likeCount: Int member: Member time: DateTime } type Member { name: String profilePicture: Picture } type Picture { width: Int height: Int url: String }
  14. [ { "name": "Group", "kind": "OBJECT", "interfaces": [ "Node" ],

    "fields": [ { "name": "id", "type": "ID", "nonNull": true }, { "name": "name", "type": "String" }, { "name": "events", "type": "Connection", "ofType": "Event", "reverseName": "group" } ] }, ...
  15. > reindex schema-push Reading schema from ./ReindexSchema.json... Requesting migration from

    API... Migrations: [DONE] create new type Comment [DONE] create new type Event [DONE] create new type Group [DONE] create new type Member [DONE] create new type Picture [DONE] create new type RSVP Successfully migrated!