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
340
GraphQL + Relay + Serverless
필요한 리소스만을 요청하고 사용하는 API 만들기
텀블벅
November 10, 2017
Tweet
Share
Other Decks in Technology
See All in Technology
Новые мапы в Go. Вова Марунин, Clatch, МТС
lamodatech
0
440
Aspire をカスタマイズしよう & Aspire 9.2
nenonaninu
0
330
SnowflakeとDatabricks両方でRAGを構築してみた
kameitomohiro
1
530
読んで学ぶ Amplify Gen2 / Amplify と CDK の関係を紐解く #jawsug_tokyo
tacck
PRO
1
290
SREからゼロイチプロダクト開発へ ー越境する打席の立ち方と期待への応え方ー / Product Engineering Night #8
itkq
2
1.1k
地味にいろいろあった! 2025春のAmazon Bedrockアップデートおさらい
minorun365
PRO
2
540
Porting PicoRuby to Another Microcontroller: ESP32
yuuu
4
520
LT Slide 2025-04-22
takesection
0
100
MCPを理解する
yudai00
12
7.9k
勝手に!深堀り!Cloud Run worker pools / Deep dive Cloud Run worker pools
iselegant
4
580
より良い開発者体験を実現するために~開発初心者が感じた生成AIの可能性~
masakiokuda
0
220
Perl歴約10年のエンジニアがフルスタックTypeScriptに出会ってみた
papix
1
230
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
The Language of Interfaces
destraynor
157
25k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.8k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How to Think Like a Performance Engineer
csswizardry
23
1.5k
Automating Front-end Workflow
addyosmani
1370
200k
Faster Mobile Websites
deanohume
306
31k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Building an army of robots
kneath
305
45k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
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 ହઑੋ दب ӝࣿ ӝ߈ਸ ೣԋ ٜ݅ ࣗਝয ূפযܳ णפ.