こんにちは。アプリケーションサービス部の河野です。

Amplify Studio の Data modeling を使えば、アプリケーションで使用する GraphQL のリソース群を GUI 上で簡単にプロビジョニングすることができます。

今回は Data modeling の使い方について、簡単に紹介したいと思います。

Amplify Studio を使用した全体の流れを知りたい方は以下のブログをご参照ください。

blog.serverworks.co.jp

Data modeling

Amplify Stduio が提供している GUI でデータモデリングができる機能です。具体的には以下の機能追加および設定が可能です。

GraphQL のスキーマ定義
- リレーションシップの設定
- 認可の設定
スキーマに基づく、AppSync, DynamoDB のデプロイ

https://docs.amplify.aws/console/data/data-model/

実践

早速ですが、Data modeling 機能を使用して、データモデルを定義していきます。
今回は、部署（DEPARTMENT）、EMPLOYEE（従業員）、プロジェクト（PROJECT）の例に実践します。

erDiagram
    DEPARTMENT ||--o{ EMPLOYEE : has
    EMPLOYEE ||--o{ PROJECT : works_on
    EMPLOYEE_PROJECT ||--o{ EMPLOYEE : assigns
    EMPLOYEE_PROJECT ||--o{ PROJECT : includes
    DEPARTMENT {
        int id
        string name
        datetime created_at
        datetime updated_at
    }
    EMPLOYEE {
        int id
        string name
        string position
        int department_id
        datetime created_at
        datetime updated_at
    }
    PROJECT {
        int id
        string name
        datetime created_at
        datetime updated_at
    }
    EMPLOYEE_PROJECT {
        int employee_id
        int project_id
    }

データモデルの定義

Amplify Studio の左メニューから Set Up > Data を開きます。

「＋ Add model 」からデータモデルを追加して、Add a field からエンティティを追加していきます。

まずは、Employee, Department, Project モデルを定義します。

※ department_id はリレーション定義から追加できるため、追加不要です。

リレーション定義

今回の例のリレーションは以下の通りです。

部署 - 従業員（1 対多）
従業員 - プロジェクト（多対多）

部署 - 従業員（1 対多）

Department モデルの Add a relationship からリレーションを追加します。 1 対多のため、「One Department to many Employee」を選択して、Save します。

以下の通り変更されています。

Department モデルに Employees が追加
Employee モデルに departmentID が追加

従業員 - プロジェクト（多対多）

Project モデルの Add a relationship からリレーションを追加します。多対多のため、「Many Project to many Employee」を選択して、Save します。

以下の通り変更されています。

Project モデルに Employees が追加
Employee モデルに Projects が追加（リレーションシップ名は先頭大文字で統一したかったので、projects → Projects に変更してます）

GraphQL のスキーマ情報も右上の「< > GraphQL Schema 」から確認できます。

デプロイ

スキーマの定義が完了後、「Save and Deploy 」からデプロイを実行します。

デプロイが開始されます。5 分以上かかるので、気長に待ちます。

デプロイが完了すると、以下の画面になります。「Done」ボタンを押すと、Data modeling の画面に戻ります。

デプロイされたリソースを確認する

AppSync

Amplify の「アプリ名 + ステージ名」でリソースが作成されています。 Data modeling で定義したスキーマを元に定義されていることがわかります。

DynamoDB

Data modeling で定義したモデルは必ず @model ディレクティブがつきます。そのため、各モデルごとの DynamoDB のテーブルが作成されます。

リソース名は「モデル名＋ハッシュ値＋ステージ名」で作成されています。 EmployeeProject の中間テーブルも自動的に作成されていますね。

また、AmplifyDataStore の Prefix で DataStore 用のテーブルが作成されています。

DataStore は AppSync の Sync 機能をより簡単に利用できる機能で、save() や delete() 等 GraphQL のクエリをより直感的にデータ操作を行えます。
詳細は以下をご確認ください。

https://docs.amplify.aws/lib/datastore/getting-started/q/platform/js/

DataStore が不要な場合は、GraphQL API Settings から、Conflict resolution & offline capabilities を Disabled に変更します。

ただし、DetaStore を無効にした場合は、Deta Manager や UI Library でのコンポーネントの紐付けが使用できなくなるので、注意が必要です。

https://docs.amplify.aws/console/data/data-model/#limitations

※ 後で変更した場合は、AmplifyDataStore 用の DynamoDB のテーブルは削除されてませんでした。

Data Manger

Manage > Content から各モデルで定義したテーブルにテストデータを追加することができます。

まずは、Department を作成します。リレーションがある Employees の欄から紐づける従業員を選択して追加することも可能です。

従業員を追加します。先ほど追加した部署も紐付けが可能です。

プロジェクトは、多対多の関係のため複数の従業員を追加することができます。

プロジェクトに追加すると、中間テーブルにも自動的にデータが追加されていることが分かります。

UI コンポーネントの紐付け（UI Library）

作成したモデルは、UI Library でデータモデルと紐づけることができます。

以下は、Employee モデルをコンポーネントに紐づけて、name と label を紐付けてた図です。
ラベルが先ほど登録した kawano で表示されていることが分かります。

制限事項

Data modeling に対応していないディレクティブが多数あります。

@default directive

@index directive

@function directive

@http directive

@predictions directive

@primaryKey directive

@searchable directive

@mapsTo directive

@auth groupClaim property

@auth groupsField property

@auth custom groupClaim

@auth custom identityClaim

@auth field-level rules

OIDC and Function providers

OwnerField as Array type

Query type

Mutation type

Subscription type

https://docs.amplify.aws/console/data/data-model/#limitations

対応していないディレクティブについては、ローカルからスキーマを直接変更してデプロイする必要があります。

試しに、Employee モデルに position で検索できるように @index ディレクティブを追加してみます。

type Employee @model @auth(rules: [{allow: public}]) @searchable {
  id: ID!
  name: String
  position: String @index(name: "byPosition" queryField: "searchEmployeeByPosition")
  departmentID: ID! @index(name: "byDepartment")
  Projects: [Project] @manyToMany(relationName: "EmployeeProject")
}

amplify push でデプロイします。

対応していないディレクティブがスキーマにある場合は、DataModeling のビジュアルエディターは使用できなくなります。
そのため、今後は先ほどのように CLI 経由で変更してく必要があります。

ただし、DataManger や UI Builder のデータの紐付けは引き続き使用できます。

※ ドキュメントには、Data Manager も使用できなくなると記載がありますが、上記の場合は使えるようです。ディレクティブによっては DataManger も使用できなくなる場合があるため、ご注意ください。

さいごに

今回は、Data modeling の使い方について簡単に紹介しました。

今までは、amplify add api で API を追加後、手動でスキーマを変更していましたが、Data modeling を使えば簡単に構築できそうです。

Data Manger から、リレーションデータも簡単に追加できるのも便利でした。

今後も色々試していきたいと思います。

【Amplify Studio 初級編】 Data modeling のビジュアルエディターを使ってみよう

Data modeling