Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Intro to GraphQL
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Praveen Durairaj
October 05, 2019
Programming
31
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Intro to GraphQL
Praveen Durairaj
October 05, 2019
More Decks by Praveen Durairaj
See All by Praveen Durairaj
Why GraphQL: A React Developer's Perspective
praveenweb
1
150
Other Decks in Programming
See All in Programming
A2UI という光を覗いてみる
satohjohn
1
110
AI時代のUIはどこへ行く?その2!
yusukebe
19
6.8k
Spring Security 実践 ─ GraphQL APIで実務に役立つ 認証・認可 を学ぶ
wagyu
0
170
今さら聞けないCancellationToken
htkym
0
220
エージェンティックRAGにAWSで入門しよう!
har1101
8
1.2k
oxlintはeslint/typescript-eslintを置き換えられるのか
shomafujita
2
320
New "Type" system on PicoRuby
pocke
1
530
Oxlintのカスタムルールの現況
syumai
6
1k
コンテキストの使い捨てをやめる — ビジネスルール駆動開発と miko —
ioki
0
150
RTSPクライアントを自作してみた話
simotin13
0
510
dRuby over BLE
makicamel
2
320
「エンジニアインターン、どうやって取った?」準備のリアルを語るLT会 Progate BAR
akiomatic
0
120
Featured
See All Featured
The Curse of the Amulet
leimatthew05
1
13k
How GitHub (no longer) Works
holman
316
150k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
11
940
RailsConf 2023
tenderlove
30
1.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
25k
Designing for Performance
lara
611
70k
We Have a Design System, Now What?
morganepeng
55
8.2k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
marcoroth
1
160
End of SEO as We Know It (SMX Advanced Version)
ipullrank
3
4.2k
How to Think Like a Performance Engineer
csswizardry
28
2.6k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
580
sira's awesome portfolio website redesign presentation
elsirapls
0
270
Transcript
None
Intro to GraphQL - Praveen @praveenweb praveenweb
Query Language • Specification for APIs • Special Syntax •
Backend and Database agnostic • Complex data/nested relationships
Comparing to REST? • Single Endpoint (/graphql) • Schema with
Type System • Introspection • Client side tooling • Caching ?
API Call Attempt Query Params? username Street City username City
Show less data on mobile
None
None
Graph like You want to control the data you get
User: Id Name Address: Street City Orders: Id Product Product: Id Name Photo Brand Brand: Id Name Your API models are “graph” like.
GraphQL Schema: Typesystem of API type User { id: Int
name: String address: Address } type Address { id: Int street: String city: String }
Queries - Fetch data • Type • Operation Name •
Variables • Fields
Mutations • Insert • Update • Delete
Subscriptions • Realtime data • Easy to consume
Server • Define schema • Define resolvers type User {
id: Int name: String address: Address } const resolvers = { Query: { user: () => users, }, };
Query Patterns • Fetch data • Smart client side cache
• Dataloader - Batching
Query Patterns • Fragments • Reusable parts
Mutation Patterns • Insert and update cache • Optimistic update
Subscription Patterns • Polling ? • Live Queries • Notifications
(event based) • Demo
GraphQL = Unified API Layer Databases App GraphQL Server SaaS
APIs Microservices
GraphQL = Unified API Layer • Federation - Apollo •
Remote Joins - Hasura
REST Killer?
REST Killer? • GraphQL enhances REST ◦ Easy to query
◦ Self Documented ◦ Client side performance (less round trips)
GraphQL is evolving @praveenweb praveenweb