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
Praveen Durairaj
October 05, 2019
Programming
0
22
Intro to GraphQL
Praveen Durairaj
October 05, 2019
Tweet
Share
More Decks by Praveen Durairaj
See All by Praveen Durairaj
Why GraphQL: A React Developer's Perspective
praveenweb
1
110
Other Decks in Programming
See All in Programming
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
140
Team operations that are not burdened by SRE
kazatohiei
1
200
Benchmark
sysong
0
260
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
340
エンジニア向け採用ピッチ資料
inusan
0
160
Java on Azure で LangGraph!
kohei3110
0
170
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
800
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
120
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
260
エラーって何種類あるの?
kajitack
5
300
F#で自在につくる静的ブログサイト - 関数型まつり2025
pizzacat83
1
310
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
850
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.8k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
GraphQLとの向き合い方2022年版
quramy
47
14k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Embracing the Ebb and Flow
colly
86
4.7k
Navigating Team Friction
lara
187
15k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
GitHub's CSS Performance
jonrohan
1031
460k
How GitHub (no longer) Works
holman
314
140k
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