Zenn
🫐

CLI上でAppSyncのSubscriptionを試してみる

2023/07/13に公開
GraphQL
AppSync
tech

はじめに

AppSyncでSubscriptionを検証してみた

AWSのAppSyncのコンソールからGraphQL APIを作成しブラウザ上でSubscriptionの動作検証

  1. Design from scrachを選択
  2. デフォルト値で良いので次へ
  3. Dynamoテーブルを使用するを選択し、適当なモデルとテーブルを作成
  4. API作成完了すると設定画面にAppSyncのURLとAPIキーが表示されるので控えておく
  5. BookモデルをベースにしたGraphQLのスキーマが自動生成されていることを確認
  6. クエリ画面からonCreateBookをSubscribeする
    １個ミューテーションをサブスクライブしましたと表示される
  7. ブラウザ上で別タブを開き、今度はMutationを実行してみる
  8. Mutation実行結果が流れてきていることを確認

CLIから動作確認

AWSのドキュメントにWebSocketを利用したクライアントの構築方法があるのでそれを参考にする

wscatの利用例

wscatというWebSocketサーバーを簡単に立ててくれるパッケージを利用して検証する

  1. wscatのインストール
    npm install -g wscat
  2. AppSyncのホスト情報を設定
    GRAPHQL_HOST=xxx.appsync-api.ap-northeast-1.amazonaws.com
REALTIME_URL=wss://xxx.appsync-realtime-api.ap-northeast-1.amazonaws.com/graphql
API_KEY=da2-xxx
  3. ヘッダーの作成
    今回はAPIキー認証のためヘッダーは以下のようになる
    別の認証モードだとヘッダーの構成は異なるので注意
    header=`echo "{\"host\":\"$GRAPHQL_HOST\",\"x-api-key\":\"$API_KEY\"}" | base64`
  4. Subscriptionの実行しConnectedが表示されることを確認
    $ wscat -s graphql-ws -c "$REALTIME_URL?header=$header&payload=e30="
Connected (press CTRL+C to quit)
  5. AppSyncに接続しにいく
    Connected (press CTRL+C to quit)
> {"type":"connection_init"}
< {"type":"connection_ack","payload":{"connectionTimeoutMs":300000}}
< {"type":"ka"}
  6. Subscriptionの実行
    > {"id":"uuid-xxx","payload":{"data":"{\"query\":\"subscription {\\n  onCreateBook {\\n    id\\n    title\\n  }\\n}\\n\",\"variables\":{}}","extensions":{"authorization":{"host":"<GRAPHQL_HOST>","x-api-key":"<API_KEY>"}}},"type":"start"}
< {"id":"uuid-xxx","type":"start_ack"}
  7. CLI上でonCreateBookのサブスクライブが出来たのでAWSコンソールからMutationを実行して、CLI側にデータが流れてくるか確認する
    < {"id":"uuid-xxx","type":"data","payload":{"data":{"onCreateBook":{"id":"efd61000-323b-40b8-89b4-0813d1ef9b24","title":"test2"}}}}

aws-mobile-appsync-sdk-jsの利用

aws-mobile-appsync-sdk-jsというAppSync用クライアントがAWSから提供されているので使ってみる
READMEには、Reactへの組込み方法も記載されているのでアプリケーションに組込むのにも便利そう

  1. パッケージのインストール
    npm install aws-appsync-auth-link aws-appsync-subscription-link
  2. CLI上なので、WebSocketサーバーを明示的に利用する設定が必要なのでwsを入れておく
    uuidは内部のパッケージ内で利用しているが勝手にインストールしてくれないため手動で入れる
    npm install ws @types/ws ts-node uuid
  3. aws-mobile-appsync-sdk-jsのドキュメントを参考にコードを記述
    import { createAuthLink, AuthOptions } from 'aws-appsync-auth-link';
import { createSubscriptionHandshakeLink } from 'aws-appsync-subscription-link';
import { HttpLink, ApolloClient, InMemoryCache, ApolloLink, gql } from '@apollo/client/core'; // reactを使っていないのでcoreからimport

const ws = require('ws');

// websocketの設定
global.WebSocket = ws;

const url = 'https://xxx.appsync-api.ap-northeast-1.amazonaws.com/graphql';
const region = 'ap-northeast-1';
const auth: AuthOptions = {
  type: 'API_KEY',
  apiKey: 'da2-xxx',
};

const httpLink = new HttpLink({ uri: url });

const link = ApolloLink.from([
  createAuthLink({ url, region, auth }),
  createSubscriptionHandshakeLink({ url, region, auth }, httpLink)
]);

const client = new ApolloClient({
  link,
  cache: new InMemoryCache(),
});

type Book = {
  id: string
  title: string
}

const subscription = client.subscribe<{ onCreateBook: Book }>({
  query: gql`
  subscription MySubscription {
    onCreateBook {
      id
      title
    }
  }
`})
.subscribe(x => {
  if (x.data?.onCreateBook != null) {
    const _data = x.data?.onCreateBook;
    console.log(_data);
  }
});
  4. スクリプトを実行後にAWSコンソール側からMutationを実行してデータが流れてくることを確認
    ./node_modules/.bin/ts-node main.ts
{
  id: 'b438f67a-ac24-49c0-bbe3-e3b444ab2532',
  title: 'test3',
  __typename: 'Book'
}

GUIのGraphQL Clientで確認

GraphQL Clientはaltairを使いました

subscriptionの設定

こちらを参考にした

実際に動作確認

Discussion