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
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
130
それでも私はContextに値を詰めたい | Go Conference 2025 / go conference 2025 fill context
budougumi0617
4
1.2k
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
ishikawa_satoru
1
290
SOC2取得の全体像
shonansurvivors
1
350
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
3
240
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
23
16k
stupid jj tricks
indirect
0
7.8k
GopherCon Tour 概略
logica0419
2
170
自作LLM Native GORM Pluginで実現する AI Agentバックテスト基盤構築
po3rin
2
240
Function calling機能をPLaMo2に実装するには / PFN LLMセミナー
pfn
PRO
0
860
「技術負債にならない・間違えない」 権限管理の設計と実装
naro143
35
11k
[2025-09-30] Databricks Genie を利用した分析基盤とデータモデリングの IVRy の現在地
wxyzzz
0
450
Featured
See All Featured
Scaling GitHub
holman
463
140k
Designing Experiences People Love
moore
142
24k
How to Think Like a Performance Engineer
csswizardry
27
2k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Docker and Python
trallard
46
3.6k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
For a Future-Friendly Web
brad_frost
180
9.9k
How STYLIGHT went responsive
nonsquared
100
5.8k
The Cult of Friendly URLs
andyhume
79
6.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
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 # '),$!