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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

1. AWS AppSyncとは 4

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

2. GraphQLとは 8

Slide 9

Slide 9 text

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 イベント監視（プッシュ通知などに使用）

Slide 10

Slide 10 text

3. GraphQLを試してみる 10

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Slide 31

Slide 31 text

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! }

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

4. AWS Amplifyとは 34

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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がサポートされている！

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Slide 44

Slide 44 text

5. まとめ 44

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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