Amplify クライアントを使用したクライアントアプリケーションの構築

どの GraphQL クライアントを使用しても AWS AppSync GraphQL API に接続できますが、Amplify v6 クライアントを使用することを強くお勧めします。Amplify は、GraphQL API 用に厳密に型指定されたクライアント SDK を自動生成するだけでなく、クライアントアプリケーションでのリアルタイムデータのサポートおよび強化された GraphQL クエリ機能も提供します。ウェブアプリケーションについては、Amplify は JavaScript クライアントを生成できます。クロスプラットフォームまたはモバイル環境をターゲットとするアプリケーションについては、Amplify は Android、iOS、および React Native に対応しています。これらのプラットフォームのクライアントコード生成について詳しくは、Amplify のドキュメントを参照してください。ここでは、JavaScript React アプリケーションを使い始めるためのガイドをご紹介します。

注記

開始する前に、npm と Amazon CLI の両方をインストールして設定する必要があります。Amplify v6 クライアントを使用している場合は、このガイドに従ってください。

開始するには、以下の手順を実行します。

1. ローカルマシンで、プロジェクトのディレクトリに移動します。以下のコマンドを使用して、Amplify ライブラリをインストールします。

   npm install aws-amplify

2. 構成ファイルをダウンロードし、プロジェクトフォルダに配置します。構成ファイルには、通常、一部の設定 (エンドポイント、リージョン、承認モードなど) が定義された config 変数が含まれます。例えば、次のようになります。

   const config =  {
       API: {
           GraphQL: {
             endpoint: 'https://abcdefghijklmnopqrstuvwxyz.appsync-api.us-west-2.amazonaws.com/graphql',
             region: 'us-west-2',
             defaultAuthMode: 'apiKey',
             apiKey: ''
           }
       }
   };
   
   export default config;

3. コードで、Amplify ライブラリと設定をインポートして Amplify を設定します。

   import { Amplify } from 'aws-amplify';
   import config from './aws-exports.js';
   
   Amplify.configure(config);

   または、API 設定でスニペットを使用して Amplify を直接セットアップします。

   import { Amplify } from 'aws-amplify';
   
   Amplify.configure({
     API: {
       GraphQL: {
         endpoint: 'https://abcdefghijklmnopqrstuvwxyz.appsync-api.us-west-2.amazonaws.com/graphql',
         region: 'us-west-2',
         defaultAuthMode: 'apiKey',
         apiKey: ''
       }
     }
   });

4. Amplify ツールチェーンを使用すると、スキーマに基づいてオペレーションを自動生成できるため、手動でスクリプトを作成する手間が省けます。アプリケーションのルートディレクトリで、次の CLI コマンドを使用します。

   npx @aws-amplify/cli codegen add --apiId <id goes here> --region <region goes here>

   これにより、API のスキーマがダウンロードされ、デフォルトでクライアントヘルパーコードが src/graphql フォルダに生成されます。API デプロイのたびに、次のコマンドを再実行して、更新された GraphQL ステートメントとタイプを生成できます。

   npx @aws-amplify/cli codegen

5. Android、Swift、Flutter、JavaScript DataStore のモデルを生成できるようになりました。スキーマをダウンロードするには以下のコマンドを使用します。

   aws appsync get-introspection-schema --api-id <id goes here> --region <region goes here> --format SDL schema.graphql

   その後、アプリケーションのルートディレクトリから以下のコマンドを実行します。

   npx @aws-amplify/cli codegen models \
   --model-schema schema.graphql \
   --target [android|ios|flutter|javascript|typescript] \
   --output-dir ./