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
GraphQL + Relay + Serverless
Search
텀블벅
November 10, 2017
Technology
2
350
GraphQL + Relay + Serverless
필요한 리소스만을 요청하고 사용하는 API 만들기
텀블벅
November 10, 2017
Tweet
Share
Other Decks in Technology
See All in Technology
「Roblox」の開発環境とその効率化 ~DAU9700万人超の巨大プラットフォームの開発 事始め~
keitatanji
0
140
Telemetry APIから学ぶGoogle Cloud ObservabilityとOpenTelemetryの現在 / getting-started-telemetry-api-with-google-cloud
k6s4i53rx
0
160
意志の力が9割。アニメから学ぶAI時代のこれから。
endohizumi
1
100
Amazon Inspector コードセキュリティで手軽に実現するシフトレフト
maimyyym
0
140
アカデミーキャンプ 2025 SuuuuuuMMeR「燃えろ!!ロボコン」 / Academy Camp 2025 SuuuuuuMMeR "Burn the Spirit, Robocon!!" DAY 1
ks91
PRO
0
150
Exadata Database Service on Dedicated Infrastructure セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
1
320
ロールが細分化された組織でSREと協働するインフラエンジニアは何をするか? / SRE Lounge #18
kossykinto
0
240
ユーザー課題を愛し抜く――AI時代のPdM価値
kakehashi
PRO
1
130
Intro to Software Startups: Spring 2025
arnabdotorg
0
270
[kickflow]20250319_少人数チームでのAutify活用
otouhujej
0
150
GISエンジニアよ 現場に行け!
sudataka
1
140
LTに影響を受けてテンプレリポジトリを作った話
hol1kgmg
0
380
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Facilitating Awesome Meetings
lara
55
6.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
810
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Optimizing for Happiness
mojombo
379
70k
Automating Front-end Workflow
addyosmani
1370
200k
Building Applications with DynamoDB
mza
96
6.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
460
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
BBQ
matthewcrist
89
9.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Unsuck your backbone
ammeep
671
58k
Transcript
GraphQL + Relay + Serverless ߅ഋध @ థ࠶ߢ
థ࠶ߢ "#$%&'()*+,-./01234 56
ਃೠ ܻࣗझ݅ਸ ਃೞҊ ࢎਊೞח API ٜ݅ӝ I
߄ҳפ ߄ҳפীӟ࢚ಿ ࢸݺ оѺ ߓ࣠࠺ ߓ࣠ࣗ 25,000 12,000 2,500 2,500
࢚ಿ
߄ҳפ ߄ҳפীӟ࢚ಿ ࢸݺ оѺ ߓ࣠࠺ ߓ࣠ࣗ 25,000 12,000 2,500 2,500
࢚ಿ ProductList Cart ShippingAddress ProductData ProductData
ProductList Cart ProductData ProductData ShippingAddress /carts/1 /products/1 /products/2 /shippingAddresses/1
/carts/1? fields=products,coupons,shipping_addr esses&products[images, descriptions] /carts/1? fields=products,coupons,shipping_addr esses&products[images[high,low]]&prod ucts[descriptions[reviews, contents]]
/carts_with_products_shipping_address_coupons /carts_with_products_recommendations /carts_with_products_videos /carts_with_products_newsletter_signups /carts_with_products_for_mobile /carts_with_products_for_tablets
None
None
None
None
BFF (soundcloud) Backends for Frontends
None
GraphQL A Query Language for API
{ me { name company } }
{ me { name: "߅ഋध" company: "థ࠶ߢ" } }
{ me { name company hobby } }
{ me { name: "߅ഋध" company: "థ࠶ߢ" hobby: "୷ҳ" }
}
Query REST GET method
REST GET /me { name: "߅ഋध", company: "థ࠶ߢ", hobby: "୷ҳ",
favoriteColor: "ی࢝", country: "ೠҴ", conference: "playnode 2017", cloudProvider: "IBM", age: "?^^^^", address: "??????????", cardNumber: "@#$D@#$#$%#$FD@#$@#" }
GraphQL { user (id: "1") { name company } }
GraphQL { user { name: "chulsoo" company: "younghee co." }
}
ProductList Cart ProductData ProductData ShippingAddress /carts/1 /products/1 /products/2 /shippingAddresses/1 REST
ProductList Cart ProductData ProductData ShippingAddress { cart { products {
imageUrl description price shippingCost } shippingAddress } } POST /graphql GraphQL
None
None
None
None
Type System ⚙⚙⚙
Types type Query { cart: Cart } type Cart {
products: [Product]! shippingAddress: String! } type Product { imageUrl: String! description: String! price: Int! shippingCost: Int! } { cart { products { imageUrl description price shippingCost } shippingAddress } }
Types type Query { cart: Cart } type Cart {
products: [Product]! shippingAddress: String! } type Product { imageUrl: String! description: String! price: Int! shippingCost: Int! } { cart { products { imageUrl description price shippingCost } shippingAddress } }
Types type Query { cart: Cart } type Cart {
products: [Product]! shippingAddress: String! } type Product { imageUrl: String! description: String! price: Int! shippingCost: Int! } { cart { products { imageUrl description price shippingCost } shippingAddress } }
Types type Query { cart: Cart } type Cart {
products: [Product]! shippingAddress: String! } type Product { imageUrl: String! description: String! price: Int! shippingCost: Int! } { cart { products { imageUrl description price shippingCost } shippingAddress } }
Types type Query { cart: Cart } type Cart {
products: [Product]! shippingAddress: String! } type Product { imageUrl: String! description: String! price: Int! shippingCost: Int! } { cart { products { imageUrl description price shippingCost } shippingAddress } }
Mutation REST POST/PUT/PATCH/DELETE Method
Mutation mutation { createProduct( input: { description: "ݧ ৩" price:
50000 } ) } { product { Price } }
؊ب ݈Ҋ ؏ب ݈Ҋ ٯ ۄо ਗೞח ч݅ NO
࠺ऴ ֎ਕ ਃ ୭ࣗച R
None
None
Relay
Relay
Relay
Relay
Relay
Relay
Relay
id? GraphQL Relay
id? id GraphQL Relay
GraphQL Relay
GraphQL Relay
GraphQL Relay 1
GraphQL Relay 1 1
None
None
Server
Serverless
f(⚡) Functions ⚡⚡ ⚡⚡
Serverless = function-as-a-service?
Serverless Pattern / Architecture
ࢲߡ ҙܻ ݽٚѦ ۄ٘ীѱ ݐӝ ☁ /provisioning, OS patching/upgrading, scaling,
self-healing, … /
Pricing • IBM Cloud functions • 500ms प೯ • 512MB
@ 5,000,000 ਃ പࣻ • $14.45
Pricing • प೯ दр ⏰ • ݫݽܻ ࣗ࠺ • ਃ
പࣻ ⚡
“ࢲߡ” ೡ ݽٚѦ ۄ٘ীѱ ݐӝ ☁ /API Gateway, Message Queue,
Search, Analytics, Authentication, … /
“ࢲߡ”ٜਸ ೣࣻ۽ োѾೞ ⚡ ⚡ ⚡ ⚡ ⚡ ⚡
None
GraphQL API Gateway Cart Product Search Message Queue Object Storage
⚡ ⚡ ⚡ ⚡ ⚡ ⚡ ⚡ ⚡ ⚡ ⚡ Email Authentication
GraphQL + Relay + Serverless
tumblbug.workable.com ହઑੋ दب ӝࣿ ӝ߈ਸ ೣԋ ٜ݅ ࣗਝয ূפযܳ णפ.