AI解析を使った画像シェアWEBアプリを超簡単に作る【AppSync編】#reinvent

*このエントリはシリーズ4番目の記事です。

1. 設定編
2. Cognito編
3. React編
4. AppSync編

前章でユーザーAuth機能を実装したので、次はログインしたユーザーがフォトアルバムを作成できるようAppSyncを使ってAPIを作ります。

AppSyncとは

AWS AppSyncはデータ可動型WEBアプリケーションに適したマネージドGraphQLサービスです。

AWS AppSyncを作成

プロジェクトディレクトリから以下のコマンドで始めます。

amplify add api

プロンプトには以下のように回答してください。

~/environment/photo-albums (master) $ amplify add api

? Please select from one of the below mentioned services GraphQL

? Provide API name: photoalbums

? Choose an authorization type for the API Amazon Cognito User Pool

Use a Cognito user pool configured as a part of this project

? Do you have an annotated GraphQL schema? No

? Do you want a guided schema creation? true

? What best describes your project: 

? What best describes your project: One-to-many relationship (e.g., “Blogs” with “Posts” and “Comments”)

? Do you want to edit the schema now? (Y/n) y

? Do you want to edit the schema now? Yes

Please manually edit the file created at /home/ec2-user/environment/photo-albums/amplify/backend/api/photoalbums/schema.graphql
? Press enter to continue 
? Press enter to continue 

GraphQL schema compiled successfully. Edit your schema at /home/ec2-user/environment/photo-albums/amplify/backend/api/photoalbums/schema.graphql
Successfully added resource photoalbums locally

Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

GraphQLスキーマの設定

photo-albums/amplify/backend/api/photoalbums/schema.graphql　ファイルに以下のスキーマを貼り付けます。

type Album @model @auth(rules: [{allow: owner}]) {
    id: ID!
    name: String!
    photos: [Photo] @connection(name: "AlbumPhotos")
}

type Photo @model @auth(rules: [{allow: owner}]) {
    id: ID!
    album: Album @connection(name: "AlbumPhotos")
    bucket: String!
    fullsize: PhotoS3Info!
    thumbnail: PhotoS3Info!
}

type PhotoS3Info {
    key: String!
    width: Int!
    height: Int!
}

ターミナル画面へ戻りエンターを押し、クラウドへpushします。

amplify push

All resources are updated in the cloud

と表示されれば成功です。 ここまでの作業でAlbumとPhotoデータタイプのGraphQL APIとデータの保存先であるDynamoDBテーブルの作成ができました。
左のData Sourcesメニューから作成されたDynamoDBテーブルとARNを確認することができます。

早速クエリを試してみましょう。

ログインしてクエリを試す

AWS マネジメントコンソールからAppSyncを開きます。 先ほどAmplify CLIから作成したphotoalbums APIを選択します。

photoalbumsAPIを選択してRun a QueryからQueryエディタを開きます。

クエリを試すにはまずログインする必要があるので、 先ほど作成したIDとパスワードでログインします。

ログインなしだとUnauthenticatedエラーが出ます。

{
  "errors": [
    {
      "errorType": "UnauthorizedException",
      "message": "Unable to parse JWT token."
    }
  ]
}

ユーザープールIDはphoto-albums/src/aws-exports.jsのaws_user_pools_web_client_idに入っています。

ログイン後にアルバムを追加するクエリを走らせてみるとこのように成功しました。

いくつかアルバムを追加して一覧表示してみます。

一つ目のアルバムを追加

mutation {
    createAlbum(input:{name:"First Album"}) {
        id
        name
    }
}

二つ目のアルバムを追加

mutation {
    createAlbum(input:{name:"Second Album"}) {
        id
        name
    }
}

アルバムをリスト表示

query {
    listAlbums {
        items {
            id
            name
        }
    }
}

クエリ結果

{
  "data": {
    "listAlbums": {
      "items": [
        {
          "id": "a8515e40-eef8-42f9-9237-ddf2ace12689",
          "name": "Second Album"
        },
        {
          "id": "36f5ad13-e68f-4cfe-a3d5-eaaf5893a359",
          "name": "First Album"
        }
      ]
    }
  }
}

次はGraphQLで取得したデータをフロントエンドに表示させる実装をします。

AI解析を使った画像シェアWEBアプリを超簡単に作る【DI編】