AWS AppSync Nuxtjs
概要
AppSyncを使ってみたかったので、簡単なツイートシステムを作って見ました。
今回はAppSyncの仕組みやLambdaとの連携を理解したかったので一から構築しています。
構成
フロントにNuxtjsを置いてappsyncを経由し、LambdaでDynamoDBにデータを保存ようにしてみました。
AppSyncのウィザードを使うと全部自動で作ってくれます。
AppSyncの設定
schema {
query: Query
mutation: Mutation
subscription: Subscription
}
type Mutation {
putPost(id: ID, tweet: String!): Post
}
type Post {
id: ID
tweet: String!
}
type Query {
singlePost(id: ID!): Post
}
type Subscription {
onPutPost: Post @aws_subscribe(mutations : ["putPost"])
}
方の説明の中に数値の型はintとfloatがありますが
Int スカラー型は、非小数の符号付き整数値を表します。Int は -(2^31) と 2^31 - 1 の間の値を表現できます。
intの2^31足りる??? int64も欲しいですよね!!!
5 . 作成が成功すると、メニューが出てくるので、設定の所のAPI Detailsをメモっておく
Nuxtjs
Nuxtjsのインストール
ここはスキップします、ここを参考に 公式ドキュメント5でメモった設定をここに記入する
const awsmobile = {
aws_project_region: 'ap-northeast-1',
aws_appsync_graphqlEndpoint: 'https://xxxxxxxxxxxxxxxxxxx.ap-northeast-1.amazonaws.com/graphql',
aws_appsync_region: 'ap-northeast-1',
aws_appsync_authenticationType: 'API_KEY',
aws_appsync_apiKey: 'da2-xxxxxxxxxxxxxxxxxxx'
}
export default awsmobile
3 . GraphQLのコードを書く、AppSyncで設定したスキーマとほとんど変わりません、関数名、変数の大文字小文字、$に注意。間違えると動きません
export const putPost = `
mutation PutPost(
$tweet: String!
) {
putPost(
tweet: $tweet
) {
id
tweet
}
}
`
export const onPutPost = `
subscription OnPutPost {
onPutPost {
id
tweet
}
}
`
Lambdaの設定
DynamoDBの設定
最後にもう一度AppSync側の設定
データソースの設定を行います、先ほど作ったLambdaを設定します。他にもHTTPなども設定できるので接続先はなんでも対応出来ます。「データーソースを作成」をクリック
動作テスト、クエリのところで簡単にテストが出来ます。試しに下記のようなクエリを書きます。
うまくいくと右側に結果が表示されます。(Lambdaで返却した値です)
ちなみにDynamoDBの方はというと
正常に登録されました。
FrontからPostしてみます。
実はもう通知もされます。ブラウザを二つ立ち上げてポストしてみます。動作はこんな感じです。
感想
通知の仕組みを一から作ろうと思うと大変ですが、組み合わせでここまで簡単に実装できてしまうとエンジニアがいらなくなる日がそう遠くなさそうでちょっと怖いですね
ウィザードが以前と違ってすごいシンプルになっていて分かりやすくなっていたので、初期構築はこちらからやっても良かったかなと思いました。
ソースはご自由にどうぞ
ソース
nuxtjs
https://github.com/akihiro-moriwaki/nuxt-appsync
Lambda
https://github.com/akihiro-moriwaki/nuxt-appsync-lambda
Author And Source
この問題について(AWS AppSync Nuxtjs), 我々は、より多くの情報をここで見つけました https://qiita.com/akihiro-moriwaki/items/cc16ee2b2a6051ad2385著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .