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
580
マネージド GraphQL サービス AppSync 入門
AWS AppSync の紹介です。
ktsukago
June 28, 2018
Tweet
Share
More Decks by ktsukago
See All by ktsukago
AppSync というか GraphQL 設計 Tips 5選
ktsukago
1
970
iOSDC-day3-がっつりやるリアルタイムキャンペーン分析
ktsukago
3
1.9k
AppSyncを使いこなすためのDynamoDB設計パターン
ktsukago
10
3.1k
awsでGraphQLを簡単に使ってみる
ktsukago
2
430
Other Decks in Technology
See All in Technology
Swift Testingのconfirmationを コードリーディング/Dive into Swift Testing confirmation
laprasdrum
2
260
Next.js のページ遷移を全力で止める
ypresto
7
3.2k
なにもしてないのにNew Relicのデータ転送量が増えていたときに確認したこと
tk3fftk
2
230
OCI で始める!! Red Hat OpenShift / Get Started OpenShift on OCI
oracle4engineer
PRO
1
180
Jetpack Compose Modifier 徹底解説 / Jetpack Compose Modifier
wiroha
0
200
「認証認可」という体験をデザインする ~Nekko Cloud認証認可基盤計画
logica0419
2
440
GC24 Recap: Interface Internals
task4233
0
140
DevRelの始め方
moongift
PRO
1
390
o1のAPIで実験してみたが 制限きつすぎて辛かった話
pharma_x_tech
0
200
学術機関におけるID連携とOpenID Connect
fujie
0
240
「自動テストのプラクティスを効果的に学ぶためのカードゲーム」 ( #sqip2024 )
teyamagu
PRO
2
180
開発者の定量・定性データを組み合わせて開発者体験を把握するための取り組み
ham0215
1
130
Featured
See All Featured
Bash Introduction
62gerente
608
210k
A better future with KSS
kneath
235
17k
Speed Design
sergeychernyshev
22
430
Building a Scalable Design System with Sketch
lauravandoore
459
32k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
How STYLIGHT went responsive
nonsquared
93
5.1k
Code Reviewing Like a Champion
maltzj
517
39k
Designing for Performance
lara
604
68k
Agile that works and the tools we love
rasmusluckow
327
20k
A Tale of Four Properties
chriscoyier
155
22k
Optimizing for Happiness
mojombo
375
69k
BBQ
matthewcrist
83
9.2k
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 # '),$!