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
SourceGeneratorのススメ
htkym
0
200
Basic Architectures
denyspoltorak
0
670
Rust 製のコードエディタ “Zed” を使ってみた
nearme_tech
PRO
0
170
CSC307 Lecture 05
javiergs
PRO
0
500
余白を設計しフロントエンド開発を 加速させる
tsukuha
7
2.1k
カスタマーサクセス業務を変革したヘルススコアの実現と学び
_hummer0724
0
700
dchart: charts from deck markup
ajstarks
3
990
HTTPプロトコル正しく理解していますか? 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ニャ〜
hekuchan
2
690
AI前提で考えるiOSアプリのモダナイズ設計
yuukiw00w
0
230
疑似コードによるプロンプト記述、どのくらい正確に実行される?
kokuyouwind
0
390
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
ahuglajbclajep
5
1k
Lambda のコードストレージ容量に気をつけましょう
tattwan718
0
130
Featured
See All Featured
Agile Actions for Facilitating Distributed Teams - ADO2019
mkilby
0
110
AI Search: Where Are We & What Can We Do About It?
aleyda
0
6.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
55k
Automating Front-end Workflow
addyosmani
1371
200k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
66
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
Speed Design
sergeychernyshev
33
1.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
62
49k
A Modern Web Designer's Workflow
chriscoyier
698
190k
It's Worth the Effort
3n
188
29k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
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