概要

AppSyncを使ってみたかったので、簡単なツイートシステムを作って見ました。
今回はAppSyncの仕組みやLambdaとの連携を理解したかったので一から構築しています。

構成

フロントにNuxtjsを置いてappsyncを経由し、LambdaでDynamoDBにデータを保存ようにしてみました。
AppSyncのウィザードを使うと全部自動で作ってくれます。

AppSyncの設定

AWSのAppSyncのページで「APIを作成」をクリック
今回は一番下の「一から構築」を選択
API名を適当に決めます
スキーマの設定

schema.graphql

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でメモった設定をここに記入する

appsync-exports.js

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

github appsync-exports.js

3 . GraphQLのコードを書く、AppSyncで設定したスキーマとほとんど変わりません、関数名、変数の大文字小文字、$に注意。間違えると動きません

mutations.js

export const putPost = `
  mutation PutPost(
    $tweet: String!
  ) {
    putPost(
      tweet: $tweet
    ) {
      id
      tweet
    }
  }
`

subscriptions.js

export const onPutPost = `
  subscription OnPutPost {
    onPutPost {
      id
      tweet
    }
  }
`

Lambdaの設定

ソースをgitに上げておいたので、それをアップロードしますポイントはcallbackに結果を指定してあげると、appsync側に返却されます

DynamoDBの設定

Dynamoで1個テーブルを作りますテーブルはid、tweetの二つのカラムです

最後にもう一度AppSync側の設定

データソースの設定を行います、先ほど作ったLambdaを設定します。他にもHTTPなども設定できるので接続先はなんでも対応出来ます。「データーソースを作成」をクリック
手順にしたがって登録します
スキーマのところでMutationの関数に先ほど登録したデータソースをアタッチします
動作テスト、クエリのところで簡単にテストが出来ます。試しに下記のようなクエリを書きます。

うまくいくと右側に結果が表示されます。（Lambdaで返却した値です）

ちなみにDynamoDBの方はというと

正常に登録されました。