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 サービス AppSync 入門
Search
ktsukago
June 28, 2018
Technology
4
620
マネージド GraphQL サービス AppSync 入門
AWS AppSync の紹介です。
ktsukago
June 28, 2018
Tweet
Share
More Decks by ktsukago
See All by ktsukago
AppSync というか GraphQL 設計 Tips 5選
ktsukago
1
1.1k
iOSDC-day3-がっつりやるリアルタイムキャンペーン分析
ktsukago
3
2.1k
AppSyncを使いこなすためのDynamoDB設計パターン
ktsukago
10
3.3k
awsでGraphQLを簡単に使ってみる
ktsukago
2
460
Other Decks in Technology
See All in Technology
「Verify with Wallet API」を アプリに導入するために
hinakko
1
220
Railsアプリケーション開発者のためのブックガイド
takahashim
14
6k
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
5.4k
コンテキストエンジニアリングとは? 考え方と応用方法
findy_eventslides
4
870
関係性が駆動するアジャイル──GPTに人格を与えたら、対話を通してふりかえりを習慣化できた話
mhlyc
0
130
DataOpsNight#8_Terragruntを用いたスケーラブルなSnowflakeインフラ管理
roki18d
1
320
許しとアジャイル
jnuank
1
110
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
6
3k
extension 現場で使えるXcodeショートカット一覧
ktombow
0
200
Access-what? why and how, A11Y for All - Nordic.js 2025
gdomiciano
1
100
全てGoで作るP2P対戦ゲーム入門
ponyo877
3
1.3k
SoccerNet GSRの紹介と技術応用:選手視点映像を提供するサッカー作戦盤ツール
mixi_engineers
PRO
1
160
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Documentation Writing (for coders)
carmenintech
75
5k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Agile that works and the tools we love
rasmusluckow
331
21k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
The Cult of Friendly URLs
andyhume
79
6.6k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Balancing Empowerment & Direction
lara
4
670
YesSQL, Process and Tooling at Scale
rocio
173
14k
Transcript
Amazon Web Services Japan Tsukagoshi Keisuke GraphQL
AppSync Building Realtime Application
Who am I ? e gd B A @ Mobile
/ DevOps / Serverless W SJ ba W J c S=
Overview c G E E R Q Aa A G
I G I G S T Q LPR I We G
GraphQL
GraphQL ? • GraphQLAPI &%. TypeSystem " &%." !'0+0-/($,
• GraphQL&-$#/*'0+0)0(" !!)0(
2.GraphQL%*:0#9$ -REST API 4!- • REST API 4" 4! •
API 4E?KJND% • API 4&;+94% • API 4E?KJND1 %,:00AN> • @L=<ND$84 • PIOC;+9437 API ;$2(:6282# • -/$'=HNDEMGN3/0#07BOFO14 5 Request / Response4 %4)9
GraphQL,/&' • ".0',#1)10%1*1$"/10 • 1)1+&( • API(!-,0'
• API
GraphQL – GraphQL - • P ) A
• A ) B A C • A I B A P )
GraphQL – GraphQL - • P ) A
• A ) B A C • A I B A P )
! type Todo { id: ID! name: String description: String
status: TodoStatus } type Query { getTodos: [Todo] } enum TodoStatus { done pending } A N I S D )
)
)
) ) PL • La G p - G PL
G P hp r I C P P • I C P P G B - P G QI • I A QG P I -I G
) { "id": "1", "name": "Get Milk", “priority": "1" },
{ "id": “2", "name": “Go to gym", “priority": “5" },… type Query { getTodos: [Todo] } type Todo { id: ID! name: String description: String priority: Int duedate: String } query { getTodos { id name priority } } ! ! !
) != Graph database NoSQL,
Relational, HTTP, etc. GraphQL /posts /postInfo /postJustTitle /postsByAuthor /postNameStartsWithX /commentsOnPost
) ) PL • La G p - G PL
G P hp r I C P P • I C P P G B - P G QI • I A QG P I -I G
) ) #$ & Mutation#& %& & - &"$ !&&
mutation addPost( id:123 title:”New post!” author:”Nadia”){ id title author } data: [{ id:123, title:”New Post!” author:”Nadia” }]
type Subscription { addedPost: Post @aws_subscribe(mutations: ["addPost"]) deletedPost: Post @aws_subscribe(mutations:
["deletePost"]) } type Mutation { addPost(id: ID! author: String! title: String content: String): Post! deletePost(id: ID!): Post! } subscription NewPostSub { addedPost { __typename version title content author url } }
) ) Subscription NewPostSub { addedPost{…} } WebSocket URL and
Connection Payload Secure Websocket Connection (wss://)
const AllPostsWithData = compose( graphql(AllPostsQuery, { options: { fetchPolicy: 'cache-and-network‘
}, props: (props) => ({ posts: props.data.posts, subscribeToNewPosts: params => { props.data.subscribeToMore({ document: NewPostsSubscription, updateQuery: (prev, { subscriptionData: { newPost } }) => ({ ...prev, posts: [newPost, ...prev.posts.filter(post => post.id !== newPost.id)] }) }); }); …//more code )
Demo:
AppSync
AWS AppSync GraphQL GraphQL
OV;5V; • R-S>/K • %,01A@ +?A9NIVF • &'R-S>/K!DV>, •
6QITV9PU • OV8V,-HR5V9PU • F3NLUEC3;ELA<V:#"((#6 UCUB>/H, • =V9MSLD.- • =V9MSLD.-*@MAE • OV8V!%LA<V:U4,7JVE • 2GQ/U !)-HR5V9PU, ! $ Sync
AppSync7CXGNI • )) 0' %$"', 1@MS>XWEHA65;<4%$"', • ,
(-* " 0'&( %+,$ +"* # &! • !"',$,0 *)# *(/0 87TA?FI7 • *)# *(/0 TA?FI7QHLXB1CXMTAI7KXJTXB1=AGF CXIWYU • )"*,$(' -"*0 -,,$(' -+ *$),$(' 65 *)# 7@OVYDRX • ,$(' *)# 29 -+ *$"* 87 • "+(%."* TA?FI VFPXF7; 3:
AppSync Overview AWS AppSync Am azon Dynam oDB AW S
Lam bda Elasticsearch
dynamoDBAmazonES Am azon Dynam oDB ElasticSearch -1,+1*& "%$
!# (101. /')1 e.t.c
Lambda3rdPartyAPI Lambda"DataSource!# ! WebAPI"
# !"
AWS AppSync Am azon Dynam oDB AW S Lam
bda Elasticsearch
(%,* • (%,*',) # &$+# !" • GraphQL API
1 GraphQL (%,* " SDL(Schema Definition Language) !
schema { query:Query mutation: Mutation subscription: Subscription
} Query : Mutation : Subscription :
$ type Query { getTodos: [Todo] } type Todo
{ id: ID! name: String description: String status: TodoStatus } enum TodoStatus { done pending } %'#" Not Null ID! &"! [String!]
" "" !
Resolver Mapping Template
AppSync Overview AWS AppSync Am azon Dynam oDB AW S
Lam bda Elasticsearch
*+#/'$..%,/!2 • '$..%,/! GraphQL*! // //
GraphQL,&. • Apache Velocity Template Language0VTL1 • %-)(." • https://docs.aws.amazon.com/appsync/latest/devguide/resolver- mapping-template-reference-programming-guide.html
;+<
[email protected]
?%/?5=@1 • $*)&?1>@< • !/804#<1 • 2;0@(:?4#@7.1 • 0@,
• ;)17.5 • 9@'@ID=)6?)4 <,;?%/ • -".$
• •
: { "version" : "2017-02-28",
"operation" : "GetItem", "key" : { "id" : { "S" : "${context.arguments.id}" } } }
: $utils.toJson($context.result) { "id" :
${context.data.id}, "title" : "${context.data.theTitle}", "content" : "${context.data.body1} ${context.data.body2}" }
DynamoDB
AppSync Overview AWS AppSync Am azon Dynam oDB AW S
Lam bda Elasticsearch
GraphQL Endpoint export default { "graphqlEndpoint": "https://**.appsync-api.**.amazonaws.com/graphql", "region": "us-east-1", "authenticationType":
"API_KEY", "apiKey": ”***" }
Client const client = new AWSAppSyncClient({ url: awsconfig.ENDPOINT, region: AWS.config.region,
auth: { type: AUTH_TYPE.AWS_IAM, credentials: Auth.currentCredentials() } }); const WithProvider = () => ( <ApolloProvider client={client}> <Rehydrated> <AppWithData /> </Rehydrated> </ApolloProvider> ); https://aws.github.io/aws-amplify/
Client //API Key const client = new AWSAppSyncClient({ url: awsconfig.ENDPOINT,
region: awsconfig.REGION, auth: { type: AUTH_TYPE.API_KEY, apiKey: awsconfig.apiKey} });
Client //IAM auth: { type: AUTH_TYPE.AWS_IAM, credentials: Auth.currentCredentials() }
//Cognito User Pool auth: { type: AUTH_TYPE.AMAZON_COGNITO_USER_POOLS, jwtToken: Auth.currentSession().accessToke.jwtToken }
Demo: GraphQL
• AWS AppSync GraphQL Photo Sample •
https://github.com/aws-samples/aws-amplify-graphql • GraphQL starter application • https://github.com/aws-samples/aws-mobile-appsync- events-starter-react
AWS AppSync GraphQL Photo Sample
B • B B ) C • C ) A
I I P C • C P C P P )
Happy coding with AppSync! AWS AppSync Am azon Dynam oDB
AW S Lam bda Elasticsearch AWS AppSync #"&%-*(+ GraphQL API # '),$!