翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
クライアントアプリケーションをビルドする
AWS AppSync GraphQL クライアントを使用して GraphQL API に接続できますが、Amplify クライアントを強くお勧めします。Amplify は、GraphQL API 用に厳密に型指定されたクライアント SDKs を自動生成するだけでなく、クライアントアプリケーションでのリアルタイムデータと強化された GraphQL クエリ機能のサポートも提供します。ウェブアプリケーションの場合、Amplify はクライアントを生成 JavaScriptできます。クロスプラットフォームまたはモバイル環境をターゲットとするアプリケーションについては、Amplify は Android、iOS、および React Native に対応しています。これらのプラットフォームのクライアントコード生成について詳しくは、Amplify のドキュメント
注記
開始する前に、npm
開始するには、以下の手順を実行します。
-
ローカルマシンで、プロジェクトのディレクトリに移動します。以下のコマンドを使用して、Amplify ライブラリをインストールします。
npm install aws-amplify
-
設定ファイルをダウンロードし、プロジェクトフォルダに配置します。設定ファイルには、通常、一部の設定 (エンドポイント、リージョン、認可モードなど) が定義された
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;
-
コードで、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: '' } } });
-
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
-
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 ./