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

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

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

AWS AppSync GraphQL クライアントAPIを使用して GraphQL に接続できますが、Amplify v6 クライアントを強くお勧めします。Amplify は、GraphQL SDKsの強力な型付けされたクライアントを自動生成するだけでなくAPI、クライアントアプリケーションでのリアルタイムデータと拡張 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 ./