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.

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
5. Data fetching Data fetching
6. RESTful RESTful
7. 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" } }
8. GET /events/225873253 GET /groups/14703552 GET /events/225873253/rsvps GET /events/225873253/comments
9. 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" } }, ... ]
10. GET /events/225873253 GET /groups/14703552 GET /events/225873253/rsvps GET /events/225873253/comments GET /members/13134851 GET /members/11692193 GET /members/67277782 GET /members/...
12. Ad-hoc Ad-hoc (RPC) (RPC)
13. 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": { ... } }, ... ] }
14. 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": { ... } // }, // ... // ] }
15. 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": { ... } }, ... ] }
16. RESTful RESTful Cache consistency ! Loose coupling ! Multiple round trips, slow " Ad-hoc Ad-hoc One request per view, fast ! Tight coupling " No cache consistency "
17. GraphQL GraphQL
18. { event(id: 225873253) { id name description } } { "event" { "id": 225873253, "name": "HelsinkiJS October 2015" "description": "GraphQL: A Developer-friendly..." } }
19. { 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" }], } }
20. { 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" } } }] } }
21. { member(id: 13134851) { profilePicture(size: 100) { width height url } } } { "member" { "profilePicture": { "width": 100, "height": 75, "url": "/i/john_100x75.jpg" } } }
22. { member(id: 13134851) { profilePicture(size: 50) { width height url } } } { "member" { "profilePicture": { "width": 50, "height": 50, "url": "/i/john_50x50.jpg" } } }
23. Schema Schema
24. 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 }
25. Tools Tools
26. Demo! Demo!
27. Applications Applications
28. Using GraphQL Using GraphQL
29. Facebook Facebook
30. Financial Times Financial Times
31. HSL Journey HSL Journey Planner Planner
32. Client-side Client-side
33. Mobile Mobile
34. Relay Relay + + React React
35. Relay Relay ♥ React React Native Native
36. Server Server graphql-js libgraphqlparser graphql-ruby graphql-java Reindex
38. Instant GraphQL Instant GraphQL server server
39. Build apps Build apps without servers without servers
40. [ { "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" } ] }, ...
41. > 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!
42. @reindexio www.reindex.io