AWS AppSync + GraphQL + AWS Amplify + Angular #AWS

AngularからGraphQLでAWS AppSyncと通信を行う基本方法を記述します

今回はサンプルなのでAWS AppSyncのデータソースはDynamoDBのテーブルを直接参照する形とします。

【前提条件】
　Angular側には既にAmplifyがインストールされていることとする

(1)AWS AppSyncでインターフェースを作成
　(a)AWS AppSyncの「データソース」を選択し、データソース画面を表示する
　(b)「データソースを作成」ボタンをクリックし、新しいデータソース画面を表示する
　(c)以下の通り入力し、「作成」ボタンをクリックする
　　　データソース名・・・適当な名前(ここではsampleとする)
　　　データソースタイプ・・・「Amazon DynamoDBテーブル」を選択
　　　リージョン・・・DynamoDBテーブルのあるリージョンを選択
　　　テーブル名・・・情報を取得したいテーブルを選択
　　　既存のロールを作成または使用する・・・適宜選択
　　　バージョン管理・・・今回は有効化しない
　　　GraphQL を自動的に生成する・・・「ON」を選択する
　(d)AWS AppSyncの「スキーマ」を選択し、Schema画面を表示する
　(e)スキーマの内容を確認し、データ取得リゾルバの定義がされていることを確認する
　　ここではgetSample、listSampleが生成されているはず

　これでAWS AppSync側はひとまず完了

(2)Angular側でアクセス用プログラム作成
　(a)プロジェクトの直下で以下のコマンドを実行する
　　　　> amplify codegen
　　　→これによりAWS AppSyncにGraphQLでアクセスするクライアント側のコードが生成される
　(b)サーバーアクセス用Service作成

    import { Injectable } from '@angular/core';
    import API, { graphqlOperation } from '@aws-amplify/api';
    import * as Observable from 'zen-observable';
    import * as queries from '../../graphql/queries';

    @Injectable {
      providedIn: 'root',
    }
    export class SampleService {
      constructor() {}

      /**
       * HashKeyであるkeyに対応するデータを取得する
       * @param key HashKey
       * @return 取得データ
       */
      public async getSample(key:string):Observable<object> {
        return await API.graphql(graphqlOperation(queries.getSample, {
          key: key,
          })
        );
      }

      /**
       * keyに対応するデータをScanして取得する
       * @param key 検索キー
       * @return 取得データ
       */
      public async getSampleList(key:string):Observable<object> {
        return await API.graphql(graphqlOperation(queries.listSamples, {
            filter: {
              key: {
                eq: key,
              },
            },
            limit: 100,
          })
        );
      }
    }

　　※DynamoDBのScanは、通常のRDBのように取得時にSQLで絞り込むのではなく、全検索した後にfilterで絞り込む形となっているためlimitに十分な値を設定しておかないと取得件数ゼロとなってしまう。
　　　またlimitを超えるだけのデータが取得される場合、取得値は空となりnextTokenに値が設定される。

　　filterの演算子は以下を参考
　　　eq : 等号
　　　ne : 否定等号
　　　gt : より大きい
　　　ge : 以上
　　　lt : より小さい
　　　le : 以下

　(c)Serviceを呼び出す側のプログラム作成

    export class SampleComponent {
      constructor(private sampleService : SampleService) {}

      ngOnInit() : void {
        this.sampleService.getSample("001").then((h) => {
          const item = h.data.getSample;
          // ここにデータ取得処理を記述
        });

        this.sampleService.getSampleList("002").then((h) => {
          const items = h.data.listSamples.items;
          for (const item of items) {
            // ここにデータ取得処理を記述
          }
      }
    }