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
33
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
ビデオ通話が繋がる0.2秒で何が起きているのか
supurazako
2
160
Lean は証明の正しさを確認するためだけのツールって思ってませんか?
inoueasei
1
130
生成AI導入の「期待外れ」を乗り越える ー 開発フロー改革が目指す、真の組織変革
starfish719
0
2.8k
ソフトウェア設計に溶けるインフラ ― AWS CDK のインフラ認識論
konokenj
3
710
php-fpmのプロセスが枯渇した日-調査・対処・そして本当にやるべきだったこと-
shibuchaaaan
0
180
Laravelで学ぶ Webアプリケーションチューニング入門/web_application_tuning_101
hanhan1978
4
1.5k
【やさしく解説 設計編・中級 #1】一つの車に、運転手は一人 ~ある倉庫システムの事例から~
panda728
PRO
0
200
Generative UI & AI-Assistants for Your Angular Solutions
manfredsteyer
PRO
1
280
エンジニアにデザインハーネスを 〜デザインプロセスを規定するためのハーネス〜 / Design harness from an engineer's perspective
rkaga
2
1.8k
全PRの83%がAIレビューだけでマージできるようになった開発組織はその後どうなったか
athug
0
630
言語を使う側から、作る側へ。 自作 Lisp で得た新たな気づき。
andpad
0
140
Prismを使った型安全な暗号化_関数型まつり2026
_fhhmm
0
160
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
How GitHub (no longer) Works
holman
316
150k
Technical Leadership for Architectural Decision Making
baasie
3
450
WENDY [Excerpt]
tessaabrams
11
39k
SEO in 2025: How to Prepare for the Future of Search
ipullrank
3
3.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
408
67k
Balancing Empowerment & Direction
lara
6
1.2k
AI: The stuff that nobody shows you
jnunemaker
PRO
9
850
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
Information Architects: The Missing Link in Design Systems
soysaucechin
0
1k
Stewardship and Sustainability of Urban and Community Forests
pwiseman
0
400
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
620
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