Slide 1
Slide 1 text
AppSyncで始めるGraphQL
2020/01/11 Kyoto.js #17
Ryosuke Izumi
Slide 2
Slide 2 text
Ryosuke Izumi ( is_ryo )
WebApplication / IoT
AWS / Vue / TypeScript / Serverless
v-kansai organizer
@is_ryo
Slide 3
Slide 3 text
今日のお伝えしたいこと
Slide 4
Slide 4 text
GraphQL はいいぞ。
Slide 5
Slide 5 text
GraphQL 使ったことありますか？
Slide 6
Slide 6 text
GraphQL
Slide 7
Slide 7 text
● APIのクエリ言語で、既存のデータでクエ
リを実行するためのランタイム
● レスポンスの内容を必要なものだけに指定
できる
● あと特定のMutationをSubれる
● Apolloとか有名(個人的見解)
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
AWS × GraphQL = ???
Slide 10
Slide 10 text
AWS × GraphQL = AppSync
Slide 11
Slide 11 text
AppSync
Slide 12
Slide 12 text
● AWSのサービスに対して、GraphQLで操作す
るためのサービス
● GraphQLを利用して、DynamoDBのデータを
操作したり、Lambdaをinvokeしたりすること
ができる
● 固定KeyやCognitoなどで認証をかけることが
できる
Slide 13
Slide 13 text
AppSync のデプロイは
AWS CDK が便利
Slide 14
Slide 14 text
AWS CDK
Slide 15
Slide 15 text
AWSCDK(Cloud Development Kit)は
CloaudFormationのテンプレートファ
イルを、TypeScriptやJavaScript、
Javaなどで書くことができるフレーム
ワーク
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
くわしくはここらへんにソース置いてます
https://github.com/ryo-is/cdk-templates
/tree/master/lib/stacks/AppSync
Slide 18
Slide 18 text
そんな大層なんいらん…って方は
AmplifyCLI が便利
Slide 19
Slide 19 text
https://aws-amplify.github.io/
Slide 20
Slide 20 text
https://aws-amplify.github.io/docs/
Slide 21
Slide 21 text
アプリから AppSync 使うのは
Amplify Framework
が便利
Slide 22
Slide 22 text
AWS Amplify Framework
Slide 23
Slide 23 text
https://aws-amplify.github.io/
Slide 24
Slide 24 text
https://aws-amplify.github.io/docs/
Slide 25
Slide 25 text
Vueでの使い方
Slide 26
Slide 26 text
Amplifyで利用するリソースの
設定ファイルを作る
(AmplifyCLI でリソースをデプロイした場
合は自動的に生成されます)
Slide 27
Slide 27 text
main.ts でimportして有効化する
Slide 28
Slide 28 text
plugin にしてもいいかも
Slide 29
Slide 29 text
あとはよしなに使うだけ
Slide 30
Slide 30 text
まとめ
Slide 31
Slide 31 text
● AWSでGraphQLするならAppSync
● AppSyncをデプロイするなら
AWSCDK か AmplifyCLI
● アプリからAppSyncを使うなら
AmplifyFramework
● GraphQLはいいぞ
Slide 32
Slide 32 text
おわり