第150回雲勉 AWS AppSyncではじめるGraphQL体験

第150回雲勉 AWS AppSyncではじめる GraphQL体験

アジェンダ 2 0. 自己紹介 1. AWS AppSyncとは 2. GraphQLとは 3.
GraphQLを試してみる 4. AWS Amplifyとの連携でアプリ開発 5. まとめ

０．講師自己紹介 3 ◼ 名前有本史紀（ありもとふみのり） • クラウドインテグレーション事業部ソリューション開発セクション •
過去３社ほどWebエンジニアとして活動 • 2020年5月アイレット入社 • 主にLAMP環境でのアプリケーション開発に従事、アイレットではそれに加えてLambdaやECSでのアプリケーション開発、Redshiftを使ったDWH開発などを行なっている • 過去に「AWS App Runner に Laravel をデプロイして LINEBot を作ってみよう」という資料も公開しているのでそちらもご覧下さい。

1. AWS AppSyncとは 4

1． AWS AppSyncとは 5 ◼ 概要 • AWS AppSync は、サーバーレスの
GraphQL および Pub/Sub API を作成し、単一のエンドポイントを通じて安全にデータの照会、更新、公開を行うことで、アプリケーションの開発を簡素化します。 • https://aws.amazon.com/jp/appsync/

1． AWS AppSyncとは 6 ◼ 仕組み AWS AppSync は、主に４つの要素で構成されている。クエリ
アプリ側からコールされるGraphQLなどのことスキーマデータの定義リゾルバリクエストに対し実際にデータ操作を行う部分リソースデータベースのこと。DynamoDB以外にもAurora なども指定可能

1． AWS AppSyncとは 7 ◼ 仕組みクエリスキーマリゾルバリソース

2. GraphQLとは 8

2．GraphQLとは 9 ◼ 概要 https://graphql.org/ • GraphQLとはAPI向けの言語規格です。一般的にGraphQLはHTTP上で使用され、その重要なコンセプトは、異なるリソースに対して異なるHTTPのエンドポイントを充てるのではなく、
HTTPエンドポイントに「クエリ」を POST する点です。 • REST API は、 1URLに対し1つのAPIや情報を提供できるのに対し、GraphQLは単一のエンドポイントに欲しいデータをクエリとして発行するとObject形式でレスポンスを得ることができます。 ◼ Query、Mutation、Subscriptionがある Query データ取得（REST APIのGET） Mutation データ追加、更新、削除を担当（REST APIのPOST, PATCH, DELETE） Subscription イベント監視（プッシュ通知などに使用）

3. GraphQLを試してみる 10

3． GraphQLを試してみる 11 ◼ AWS AppSyncでのAPIの作成方法 • AWSのコンソール画面から作成する • AWS
Amplifyを使用して作成する（後述）

3． GraphQLを試してみる 12 ◼ コンソール画面から作成するには

3． GraphQLを試してみる 13 ◼ コンソール画面から作成するには

3． GraphQLを試してみる 14 ◼ コンソール画面から作成するには「DynamoDBテーブルを使用するタイプを今すぐ作成」を選択

3． GraphQLを試してみる 15 ◼ コンソール画面から作成するにはスキーマの定義が作成されている

3． GraphQLを試してみる 16 ◼ コンソール画面から作成するにはベーシックなqueryやmutations が作成されていてすぐに実行できる

3． GraphQLを試してみる 17 ◼ コンソール画面から試してみる（query）今回はAmplifyを使って作成できるAPIのデフォルトの「Todoスキーマ」を利用しました。データ一覧を取得する query MyQuery {
listTodos(limit:10) { items { description name createdAt } } }

3． GraphQLを試してみる 18 ◼ コンソール画面から試してみる(query) データ取得できている

3． GraphQLを試してみる 19 ◼ コンソール画面から試してみる（Mutation）データを作成する mutation MyMutation { createTodo(
input: { description: "雲勉のテストデータです。" name: "雲勉" }) { id name } }

3． GraphQLを試してみる 20 ◼ コンソール画面から試してみる(Mutation)

3． GraphQLを試してみる 21 ◼ コンソール画面から試してみる(Mutation) DynamoDBにデータが登録されている

3． GraphQLを試してみる 22 ◼ コンソール画面から試してみる（Mutation）データを更新する mutation UpdateMutetion { updateTodo(
input: { id: "c7429136-dfdd-4db3-a1ed-efd6a60b0210", description: "テストです。更新後のデータです。よろしくお願いします。" } ) { id, description } }

3． GraphQLを試してみる 24 ◼ コンソール画面から試してみる(Mutation) DynamoDBでデータが更新されている

3． GraphQLを試してみる 25 ◼ コンソール画面から試してみる（Mutation）データを削除する mutation DeleteMutetion { deleteTodo(
input: { id: "c7429136-dfdd-4db3-a1ed-efd6a60b0210" } ) { id, description } }

3． GraphQLを試してみる 27 ◼ コンソール画面から試してみる(Mutation) 削除前

3． GraphQLを試してみる 28 ◼ コンソール画面から試してみる(Mutation) 削除されている

3． GraphQLを試してみる 29 ◼ コンソール画面から試してみる（Subscription） AppSyncのSubscriptionは、ミューテーションに対する応答として呼び出されるスキーマのミューテーションを指定すると、AppSyncでリアルタイムにSubscriptionを起動させることができる subscription MySubscription
{ onCreateTodo { id name description } }

3． GraphQLを試してみる 31 ◼ データ項目追加する場合スキーマを調整 input CreateTodoInput { id:
ID name: String! description: String user: String } type Todo { id: ID! name: String! description: String user: String createdAt: AWSDateTime! updatedAt: AWSDateTime! }

3． GraphQLを試してみる 32 ◼ データ項目追加する場合

3． GraphQLを試してみる 33 ◼ データ項目追加する場合項目が追加されている

4. AWS Amplifyとは 34

4． AWS Amplifyとは 35 ◼ 概要 • AWSのクラウドサービス上に対話形式でAPI作成できる便利な機能 • AppSyncをサポートしてくれている
• Cognitoなどの認証周りも設定できる

4． AWS Amplifyとは 36 ◼ amplify configre コマンド

4． AWS Amplifyとは 37 ◼ amplify init コマンド

4． AWS Amplifyとは 38 ◼ AmplifyとAppSyncで簡易チャットアプリ作ってみた GraphQLで連携

4． AWS Amplifyとは 39 ◼ Cognitoの設定 amplify auth add amplify
auth push

4． AWS Amplifyとは 40 const gqlParams: string = ` mutation
put { createChatMessage( input: { user_id: "${VueStore.state.displayName}", message_body: "${this.messageBody}", } ) { ${chatMassageItems} } } ◼ mutationの実装例 ◼ JSのaws-amplifyライブラリでGraphQLがサポートされている！

4． AWS Amplifyとは 41 private async getMessages() { const gqlParams:
string = ` query list { listChatMessages(limit: 1000) { items { ${chatMassageItems} } } } `; ◼ queryの実装例

4． AWS Amplifyとは 42 const gqlParams: string = ` subscription
subCreateChatMessage { onCreateChatMessage { ${chatMassageItems} } } ◼ subscrictionの実装例

5. まとめ 44

5. まとめ 45 ◼ メリット Amplifyを使うことで短時間でバックエンドのAPIをデプロイできる。特にsubscriptionで手軽にプッシュ通知を体験できるのはすばらしい。チャットアプリ、Web上のリアルタイム通知などに利活用できそう。 ◼ デメリット
GraphQLの学習コストがかかるリゾルバ部分をカスタマイズしようとしていくとVTL等の知識が必要になりハードルが上がる印象

ありがとうございました。 46

第150回 雲勉 AWS AppSyncではじめるGraphQL体験

第150回 雲勉 AWS AppSyncではじめるGraphQL体験

More Decks by iret.kumoben

Other Decks in Technology

Featured

Transcript

第150回雲勉 AWS AppSyncではじめるGraphQL体験

第150回雲勉 AWS AppSyncではじめるGraphQL体験