Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
GraphQL
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Stefan Kanev
March 28, 2018
Programming
480
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
GraphQL
Stefan Kanev
March 28, 2018
More Decks by Stefan Kanev
See All by Stefan Kanev
Въведение в (Machine|Deep) Learning
skanev
0
110
Automated Testing: Getting it Right
skanev
1
110
From Novice to Expert
skanev
0
470
Inbetween Code and Profession
skanev
0
460
Clojure & ClojureScript
skanev
2
140
Extreme Programming
skanev
0
830
За смъртта на TDD
skanev
0
650
Python 0 2014
skanev
1
1.8k
Clojure 0 2014
skanev
0
410
Other Decks in Programming
See All in Programming
phperだってパンチカードでコーディングしたい
o0h
PRO
0
340
AIで開発が速くなった先で、開発チームは何を目指すか
shihochan
0
1.3k
APNsからLive Activityを開始する話
yumnumm
0
170
動作中のプログラムの中身をリアルタイムに覗く / Realtime Debugger for CSharp with Roslyn
prota
1
1.9k
作れる、でも消せるか?──安全に「枯らして消す」機能削除術 / Drain, Then Delete
chobishiba
2
670
HTML-in-Canvasで作る未来のWeb UI表現
clockmaker
5
5.1k
気持ちぃ〜角丸 Squircle
ryu1013
0
310
コードで差別化できない時代の ソフトウェアエンジニアリング / Software Engineering in an Era Where Code Doesn’t Differentiate
kishida
2
180
AI時代のコードレビューは人に向けるな、仕組みに向けろ
texmeijin
5
3.7k
S3 TablesのIcebergデータに、AIエージェントからアクセスしてみた / 20261016developersio2026joetsu-accessing-iceberg-in-s3tables-via-agent
kasacchiful
PRO
0
150
FactoryBotをやめればRSpecは速くなるのか?
yuta_onishi_97
0
410
AIに “答え“を書かせるのを やめてみた
___akari11
0
120
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
430
Accessibility Awareness
sabderemane
1
250
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
2
1.6k
RailsConf 2023
tenderlove
30
1.6k
Rails Girls Zürich Keynote
gr2m
96
14k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
300
Principles of Awesome APIs and How to Build Them.
keavy
128
18k
The Mindset for Success: Future Career Progression
greggifford
PRO
0
540
The B2B funnel & how to create a winning content strategy
katarinadahlin
PRO
1
570
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Transcript
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 @
None
Despite the management title, I still tend to think of
myself as a programmer
None
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
None
None
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
None
None
?