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
130
Other Decks in Programming
See All in Programming
Oxlint JS plugins
kazupon
1
950
カスタマーサクセス業務を変革したヘルススコアの実現と学び
_hummer0724
0
700
Fragmented Architectures
denyspoltorak
0
160
なるべく楽してバックエンドに型をつけたい!(楽とは言ってない)
hibiki_cube
0
140
CSC307 Lecture 07
javiergs
PRO
0
550
IFSによる形状設計/デモシーンの魅力 @ 慶應大学SFC
gam0022
1
300
疑似コードによるプロンプト記述、どのくらい正確に実行される?
kokuyouwind
0
390
Vibe Coding - AI 驅動的軟體開發
mickyp100
0
180
Spinner 軸ズレ現象を調べたらレンダリング深淵に飲まれた #レバテックMeetup
bengo4com
1
230
Fluid Templating in TYPO3 14
s2b
0
130
15年続くIoTサービスのSREエンジニアが挑む分散トレーシング導入
melonps
2
200
生成AIを使ったコードレビューで定性的に品質カバー
chiilog
1
270
Featured
See All Featured
Statistics for Hackers
jakevdp
799
230k
Unsuck your backbone
ammeep
671
58k
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
130
Visual Storytelling: How to be a Superhuman Communicator
reverentgeek
2
430
Heart Work Chapter 1 - Part 1
lfama
PRO
5
35k
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
0
2.3k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
110
Building Applications with DynamoDB
mza
96
6.9k
A Modern Web Designer's Workflow
chriscoyier
698
190k
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
140
Designing Powerful Visuals for Engaging Learning
tmiket
0
230
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