基本的なクエリの作成 (JavaScript)

AWS マネジメントコンソール にサインインして、AppSync コンソールを開きます。

1. API ダッシュボードで、GraphQL API を選択します。

2. サイドバーで [スキーマ] を選択します。

スキーマとデータソースの詳細を入力します。詳細については、「スキーマの設計」と「データソースを追加する」の各セクションを参照してください。

[スキーマ] エディターの横に [リゾルバー] という名前のウィンドウがあります。このボックスには、[スキーマ] ウィンドウで定義されているタイプとフィールドのリストが含まれています。フィールドにはリゾルバーをアタッチできます。ほとんどの場合、フィールド処理にリゾルバーをアタッチすることになります。このセクションでは、簡単なクエリの設定について説明します。[クエリ] 型で、クエリのフィールドの横にある [アタッチ] を選択します。

[リゾルバーをアタッチ] ページの [リゾルバータイプ] で、パイプラインリゾルバーとユニットリゾルバーのどちらかを選択できます。これらのリゾルバータイプの詳細については、「リゾルバー」を参照してください。このガイドでは pipeline resolvers を使用します。

[リゾルバーランタイム] では、[APPSYNC_JS] を選択して JavaScript ランタイムを有効化します。

この API のキャッシュは有効にできます。現時点では、この機能をオフにすることをお勧めします。[作成] を選択します。

[リゾルバーを編集] ページには、リゾルバーハンドラーとレスポンス (before および after ステップ) のロジックを実装できるリゾルバーコードというコードエディターがあります。詳細については、「JavaScript リゾルバーの概要」を参照してください。

import {util} from '@aws-appsync/utils';

export function request(ctx) {
    return {};
}

export function response(ctx) {
    return ctx.prev.result;
}

このセクションの下には、[関数] というテーブルがあります。[関数] では、複数のリゾルバーで再利用できるコードを実装できます。コードを絶えず書き換えたりコピーしたりする代わりに、ソースコードを関数として保存し、必要なときにいつでもリゾルバーに追加できます。

関数はパイプラインのオペレーションリストの大部分を構成します。リゾルバーで複数の関数を使用する場合、関数の順序を設定すると、関数はその順序で順番に実行されます。これらの関数は、リクエスト関数の実行後、レスポンス関数の開始前に実行されます。

新しい関数を追加するには、[関数] で [関数を追加]、[新しい関数の作成] の順に選択します。代わりに [関数の作成] ボタンが表示されて選択できる場合もあります。

1. データソースを選択します。これがリゾルバーの処理対象となるデータソースになります。

   注記

   この例では、id で Post オブジェクトを取得する getPost にリゾルバーをアタッチします。このスキーマ用の DynamoDB テーブルをすでにセットアップ済みであると仮定します。そのパーティションキーは id に設定されており、空です。

2. Function name を入力します。

3. [関数コード] で、関数の動作を実装する必要があります。わかりにくいかもしれませんが、各関数には独自のローカルのリクエストハンドラーとレスポンスハンドラーがあります。リクエストが実行され、次にデータソース呼び出しが実行されてリクエストが処理され、データソースのレスポンスがレスポンスハンドラーによって処理されます。結果は context オブジェクトに保存されます。その後、リスト内の次の関数が実行されるか、それが最後の関数であればステップ後のレスポンスハンドラーに渡されます。

   注記

   この例では、データソースから Post オブジェクトのリストを取得する getPost にリゾルバーをアタッチします。リクエスト関数はテーブルのデータをリクエストし、テーブルはそのレスポンスを context (ctx) に渡して、レスポンスは結果を context に返します。AWS AppSync の強みは、他の AWS サービスとの相互接続性にあります。DynamoDB を使用しているため、このような作業を簡略化するための一連のオペレーションがあります。他のデータソースタイプについても共通する例がいくつかあります。

   コードは以下のようになります。

   import { util } from '@aws-appsync/utils';
   
   /**
    * Performs a scan on the dynamodb data source
    */
   export function request(ctx) {
     return { operation: 'Scan' };
   }
   
   /**
    * return a list of scanned post items
    */
   export function response(ctx) {
     return ctx.result.items;
   }

   このステップでは、次の 2 つの関数を追加しました。

   • request: リクエストハンドラーはデータソースに対して取得オペレーションを実行します。引数には、コンテキストオブジェクト (ctx)、または特定のオペレーションを実行するすべてのリゾルバーが利用できるデータが含まれます。たとえば、認可データや解決対象のフィールド名などが含まれる場合があります。return ステートメントは Scan オペレーションを実行します (例はこちらを参照)。DynamoDB を使用しているため、そのサービスの一部のオペレーションを使用できます。このスキャンでは、テーブル内のすべての項目の基本的なフェッチが実行されます。このオペレーションの結果は、レスポンスハンドラーに渡される前に result コンテナーとしてコンテキストオブジェクトに保存されます。request はパイプライン内のレスポンス前に実行されます。

   • response: request の出力を返すレスポンスハンドラー。引数は、更新されたコンテキストオブジェクトで、return ステートメントは ctx.prev.result です。ガイドのこの段階では、この値についてはよくわからないかもしれません。ctx は context object オブジェクトを参照します。prev はパイプライン内の直前のオペレーション、この例では request を参照します。result には、リゾルバーがパイプラインを経由して移動する際の結果が含まれます。すべてをまとめると、ctx.prev.result は最後に実行されたオペレーションの結果であるリクエストハンドラーを返します。

4. 完了したら、[作成] を選択します。

リゾルバー画面に戻り、[関数] で [関数を追加] ドロップダウンを選択して、関数を関数リストに追加します。

[保存] を選択してリゾルバーを更新します。

AWS マネジメントコンソール にサインインして、AppSync コンソールを開きます。

1. API ダッシュボードで、GraphQL API を選択します。

2. サイドバーで [スキーマ] を選択します。

[リゾルバー] セクションと[ミューテーションタイプ] で、フィールドの横にある [アタッチ] を選択します。

[リゾルバーをアタッチ] ページの [リゾルバータイプ] で、[pipeline resolvers] を選択します。リゾルバーの詳細を確認する場合は、こちらを参照してください。[リゾルバーランタイム] では、[APPSYNC_JS] を選択して JavaScript ランタイムを有効化します。

この API のキャッシュは有効にできます。現時点では、この機能をオフにすることをお勧めします。[作成] を選択します。

[関数の追加] を選択して、[新しい関数を作成] を選択します。代わりに [関数の作成] ボタンが表示されて選択できる場合もあります。

1. データソースを選択します。これは、ミューテーション時にデータを操作する際のソースになります。

2. Function name を入力します。

3. [関数コード] で、関数の動作を実装する必要があります。これはミューテーションであるため、リクエストにより、呼び出されたデータソースに対してある程度状態が変化するオペレーションが実行されると理想的です。結果はレスポンス関数によって処理されます。

   注記

   createPost はパラメータがデータとして含まれているテーブルに新しい Post ものを追加します (入れます)。次のように追加します。

   import { util } from '@aws-appsync/utils';
   
   /**
    * Sends a request to `put` an item in the DynamoDB data source
    */
   export function request(ctx) {
     return {
       operation: 'PutItem',
       key: util.dynamodb.toMapValues({id: util.autoId()}),
       attributeValues: util.dynamodb.toMapValues(ctx.args.input),
     };
   }
   
   /**
    * returns the result of the `put` operation
    */
   export function response(ctx) {
     return ctx.result;
   }

   このステップでは、request と response の 2 つの関数を追加しました。

   • request: リクエストハンドラーはコンテキストを引数として受け入れます。リクエストハンドラーの return ステートメントは、組み込みの DynamoDB オペレーションである PutItem コマンドを実行します (例については、こちらまたはこちらを参照してください)。PutItem このコマンドは、パーティション key 値 (util.autoid() によって自動的に生成) とコンテキストの引数の入力による attributes (リクエストで渡される値) を取得して、Post オブジェクトを DynamoDB テーブルに追加します。key は、id で、attributes は date および title フィールド引数です。どちらも util.dynamodb.toMapValuesヘルパーを経由して実行され、DynamoDB テーブルを使用します。

   • response: レスポンスは、更新されたコンテキストを受け入れ、リクエストハンドラーの結果を返します。

4. 完了したら、[作成] を選択します。

リゾルバー画面に戻り、[関数] で [関数を追加] ドロップダウンを選択して、関数を関数リストに追加します。

[保存] を選択してリゾルバーを更新します。