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 

No content

No content

No content

Data fetching Data fetching 

RESTful RESTful 

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" } } 

GET /events/225873253 GET /groups/14703552 GET /events/225873253/rsvps GET /events/225873253/comments 

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" } }, ... ] 

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

No content

Ad-hoc Ad-hoc (RPC) (RPC) 

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": { ... } }, ... ] } 

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": { ... } // }, // ... // ] } 

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": { ... } }, ... ] } 

RESTful RESTful Cache consistency ! Loose coupling ! Multiple round trips, slow " Ad-hoc Ad-hoc One request per view, fast ! Tight coupling " No cache consistency " 

GraphQL GraphQL 

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

{ 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" }], } } 

{ 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" } } }] } } 

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

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

Schema Schema 

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 } 

Tools Tools 

Demo! Demo! 

Applications Applications 

Using GraphQL Using GraphQL 

Facebook Facebook 

Financial Times Financial Times 

HSL Journey HSL Journey Planner Planner 

Client-side Client-side 

Mobile Mobile 

Relay Relay + + React React 

Relay Relay ♥ React React Native Native 

Server Server graphql-js libgraphqlparser graphql-ruby graphql-java Reindex 

No content

Instant GraphQL Instant GraphQL server server 

Build apps Build apps without servers without servers 

[ { "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" } ] }, ... 

> 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! 

@reindexio www.reindex.io