Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
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
Security Diaries of an Open Source IAM
ahus1
0
120
Microsoft Agent 365 を 30 分でなんとなく理解する
skmkzyk
1
360
小さな判断で育つ、大きな意思決定力 / 20251204 Takahiro Kinjo
shift_evolve
PRO
1
350
21st ACRi Webinar - AMD Presentation Slide (Nao Sumikawa)
nao_sumikawa
0
220
プロダクトマネジメントの分業が生む「デリバリーの渋滞」を解消するTPMの越境
recruitengineers
PRO
3
480
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
3.3k
私のRails開発環境
yahonda
0
180
Eight Engineering Unit 紹介資料
sansan33
PRO
0
5.8k
ブロックテーマとこれからの WordPress サイト制作 / Toyama WordPress Meetup Vol.81
torounit
0
340
MCP・A2A概要 〜Google Cloudで構築するなら〜
shukob
0
160
32のキーワードで学ぶ はじめての耐量子暗号(PQC) / Getting Started with Post-Quantum Cryptography in 32 keywords
quiver
0
230
なぜフロントエンド技術を追うのか?なぜカンファレンスに参加するのか?
sakito
9
2k
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.8k
Java REST API Framework Comparison - PWX 2021
mraible
34
9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.2k
Music & Morning Musume
bryan
46
7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
1
80
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
196
69k
Agile that works and the tools we love
rasmusluckow
331
21k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
54k
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 ହઑੋ दب ӝࣿ ӝ߈ਸ ೣԋ ٜ݅ ࣗਝয ূפযܳ णפ.