クライアントアプリケーションをビルドする - AWS AppSync

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

クライアントアプリケーションをビルドする

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

注記

開始する前に、npmAmazon 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 ./