Amplify mockがすごく便利！

3734 ワード
amplify GraphQL GraphQL テキストリンク

はじめに

  • 下記の記事に続いて記載する

[Amplify, (ionic) Angular ] 一日で認証付きチャットツールを作成（準備編）
[Amplify, (ionic) Angular ] 一日で認証付きチャットツールを作成（実装編）

Amplify mockについて

新機能 – Amplify CLI を使用したローカルモックとテスト

実際のバックエンドコンポーネントを使用する代わりに、クラウドサービスの場合は API を使用する代わりに、その API のローカルで単純化されたエミュレーションを代わりに使用できることを意味します。

メリット

  • Amplifyはクラウドサービスなので、これまではAPI側を修正したら、AWSに amplify push でデプロイをしなくてはいけなかったため時間がかかっていたが、 amplify mock を使用することで、ローカルで実行できるため、APIを修正しても即反映されるため、確認への時間が短縮された。
  • GUI でのドキュメント、データのやり取りの確認も可能なので、正しいAPIの設計が出来ているか確認することができるようになった。
  • （AWSにデプロイされないため、費用も発生しない）

確認

❯❯❯ amplify mock
  • 下記が出力されることを確認
Running GraphQL codegen
✔ Generated GraphQL operations successfully and saved at src/graphql
✔ Code generated successfully and saved in file src/app/API.service.ts
AppSync Mock endpoint is running at http://192.168.0.13:20002

確認

Amplify mockで確認

  • 下記にアクセス

http://192.168.0.13:20002

作成したUIからチャットを送信し、GUIで内容を確認する

左から　listMessages を選択

ローカルで送信出来ていることを確認する

Mock GUIからメッセージを作成して、作成したUIから確認する

左から CreateMessage　を選択

GUIからもメッセージを送信することが出来ました。

最後に

  • 本当に簡単なMock程度だったら、フロントエンドエンジニアの力だけで開発出来てしまうし、本当に便利な世の中になったなぁって思うばかりです。
  • 最近では個人開発ではGraphQLでの開発が多くなって来ており、便利さを痛感しております。

参考

新機能 – Amplify CLI を使用したローカルモックとテスト
GraphQL API開発スピードを爆上げするAWS Amplify Mockingことはじめ