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
560
マネージド GraphQL サービス AppSync 入門
AWS AppSync の紹介です。
ktsukago
June 28, 2018
Tweet
Share
More Decks by ktsukago
See All by ktsukago
AppSync というか GraphQL 設計 Tips 5選
ktsukago
1
940
iOSDC-day3-がっつりやるリアルタイムキャンペーン分析
ktsukago
3
1.9k
AppSyncを使いこなすためのDynamoDB設計パターン
ktsukago
10
3k
awsでGraphQLを簡単に使ってみる
ktsukago
2
420
Other Decks in Technology
See All in Technology
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
780
推しは推せるときに推せ! プロダクトにフィードバックしていこう
nakasho
0
320
障害対応をちょっとずつよくしていくための 演習の作りかた
heleeen
0
240
生成AIの変革の時代に、直近1年で直面した課題とその解決策
ktc_wada
0
330
LayerXにおけるLLMプロダクト開発の今までとこれから
layerx
PRO
1
390
今年のRubyKaigiはProfiler Year🤘
osyoyu
0
170
オーナーシップを持つ領域を明確にする
konifar
13
3.2k
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
360
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
170
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
340
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
KubeCon EU 2024 Recap “Kubernetes Policy Time Machine: Where to Next?”
ryysud
0
220
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
The Invisible Side of Design
smashingmag
294
49k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
Optimising Largest Contentful Paint
csswizardry
8
2.4k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Six Lessons from altMBA
skipperchong
21
3k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
241
1.2M
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
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 # '),$!