GraphQL Stefan Kanev http://skanev.com/ @skanev Slovenia Ruby User Group 28 March 2018 Ljubljana Why is it exciting? 

Hi, I’m Stefan 

skanev skanev skanev.com about.me/skanev 

Chief Technical Officer @ 

No content

Despite the management title, I still tend to think of myself as a programmer 

No content

This should be part talk, part Q&A 

1 2 3 4 Walkthrough Demonstration Benefits React and Relay 

1 Walkthrough 

It’s not a technology It’s a standard 

queries vs. mutations “gets” data changes stuff 

queries vs. mutations “gets” data changes stuff 

Queries data on the server is represented as a graph 
 the client specifies which part of the graph to fetch 
 server returns only those parts 
 the input is in a special language 
 the output is in JSON 

No content

No content

query { hero { name friends { name } } } Query { "data": { "hero": { "name": "R2-D2", "friends": [ { "name": "Luke Skywalker" }, { "name": "Han Solo" }, { "name": "Leia Organa" } ] } } } Response 

Query query { hero { name appearsIn friends { name appearsIn } } } Response { "data": { "hero": { "name": "R2-D2", "appearsIn": ["NEWHOPE", "EMPIRE", "JEDI"], "friends": [ { "name": "Luke Skywalker", "appearsIn": ["NEWHOPE", "EMPIRE", "JEDI"] }, { "name": "Han Solo", "appearsIn": ["NEWHOPE", "EMPIRE", "JEDI"] }, { "name": "Leia Organa", "appearsIn": ["NEWHOPE", "EMPIRE", "JEDI"] } ] } } } 

Schema the graph is composed of objects 
 each object is of a specific type 
 each type defines a number of fields 
 each field has a type 
 there is a form of polymorphism 

type Character { name: String! friends: [Character]! appearsIn: [Episode]! } type Character { name: String! friends: [Character!]! appearsIn: [Episode!]! } By the way, this… …is better in a different way: Anybody see the difference? 

queries vs. mutations “gets” data changes stuff 

Mutations each mutation is a separate endpoint 
 it’s RPC-like (conceptually similar to REST mutations) 
 it still goes through the GraphQL language 
 we’ll see an example later 

2 Demonstration 

3 Benefits 

Caveat emptor It might be a better fit for when you control the client, as opposed to letting anybody create a client 
 The complexity on the backend is a magnitude bigger 

Self-documenting 

Decouples clients from backend once the graph is large enough, clients won’t need to request (as many) endpoints for reading 
 it’s closer to “write once” 

Versionless evolution Versioning APIs is a bitch 
 You can get away with not doing it to a large extent 
 (example) 

Traffic optimisation You get only what you asked for 
 You can get multiple things with a single request 

Structure It provides a lot of structure to build 3rd party tools on
 (especially in comparison to REST) 
 GraphiQL is a good example 
 Apollo Engine is another one 
 Relay is the most interesting example 

4 React and Relay 

No content

No content

?