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
980
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
映像・音声伝送システム
jtes
0
200
マルチAWSアカウント間のストリーミングによるデータ同期/AWS SaaS Builders Forum 2024
visional_engineering_and_design
1
110
ORM と向き合う
hoto17296
7
5.9k
【shownet.conf_】持続可能な次世代Wi-Fi運用に向けて
shownet
PRO
0
250
KDD2024参加報告
cyberagentdevelopers
PRO
1
200
Oracle Database 23ai 新機能#4 Real Application Clusters
oracle4engineer
PRO
0
110
トークナイザー入門
payanotty
2
370
k6を活用した再現性・拡張性の高い負荷試験基盤の構築
biwashi
11
2.9k
成果のためのコミュニケーション - 語彙を育てよう -/communication-for-good-outcome-developing-vocabulary
hassaku63
3
140
Interfacing Kernel C APIs from Rust
ennael
PRO
0
210
Oracle GoldenGate 23ai 導入Tips
oracle4engineer
PRO
1
200
スモールスタート、不都合な真実 〜 耳当たりの良い言葉に現場が振り回されないために/20240930-ssmjp-small-start
opelab
12
1.7k
Featured
See All Featured
Become a Pro
speakerdeck
PRO
24
4.9k
Happy Clients
brianwarren
97
6.6k
Mobile First: as difficult as doing things right
swwweet
222
8.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.7k
Building a Scalable Design System with Sketch
lauravandoore
459
32k
[RailsConf 2023] Rails as a piece of cake
palkan
49
4.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
4
98
Into the Great Unknown - MozCon
thekraken
30
1.4k
The Invisible Customer
myddelton
119
13k
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 # '),$!