アプリコードをAPIに接続する

このガイドでは、Amplify ライブラリを使用してアプリケーションコードをバックエンド API に接続します。開始する前に、以下が必要です：

• クラウドサンドボックスと Amplify Data リソースが実行中（npx ampx sandbox）
• Amplify ライブラリがインストールされたフロントエンドアプリケーション
• npm がインストール済み

Amplify ライブラリを設定する

バックエンド（npx ampx sandbox）を繰り返し実行すると、amplify_outputs.json ファイルが生成されます。このファイルには API のエンドポイント情報と認証設定が含まれています。以下のコードをアプリのエントリーポイントに追加して、Amplify クライアントライブラリを初期化および設定します：

認可モードを設定する

認可モードは、リクエストをバックエンドでどのように認可するかを決定します。デフォルトでは、Amplify Data は「userPool」認可を使用して、署名されたユーザー認証情報で API リクエストに署名します。データモデルに allow.publicApiKey() 認可ルールを使用している場合は、認可モードとして「apiKey」を使用する必要があります。認可ルールをカスタマイズを確認して、どのタイプのリクエストでどの認可モードを選択するかについて詳しく学んでください。デフォルト認可モードは、デプロイメント成功時に生成される amplify_outputs.json の一部として提供されます。

リクエストレベルで認可モードを設定する

各個別 API リクエストで認可モードを指定することもできます。これは、アプリケーションが通常は 1 つの認可モードを使用し、少数の例外がある場合に便利です。

final apiKeyRequest = ModelQueries.list(Todo.classType, authorizationMode: APIAuthorizationType.apiKey);
final apiKeyResponse = await Amplify.API.query(request: apiKeyRequest).response;

final userPoolRequest = ModelQueries.list(Todo.classType, authorizationMode: APIAuthorizationType.userPools);
final userPoolResponse = await Amplify.API.query(request: userPoolRequest).response;

final iamRequest = ModelQueries.list(Todo.classType, authorizationMode: APIAuthorizationType.iam);
final iamResponse = await Amplify.API.query(request: iamRequest).response;

final oidcRequest = ModelQueries.list(Todo.classType, authorizationMode: APIAuthorizationType.oidc);
final oidcResponse = await Amplify.API.query(request: oidcRequest).response;

final lambdaRequest = ModelQueries.list(Todo.classType, authorizationMode: APIAuthorizationType.function);
final lambdaResponse = await Amplify.API.query(request: lambdaRequest).response;

カスタムリクエストヘッダーを設定する

Amplify Data エンドポイントを使用する場合、認可目的またはフロントエンドからバックエンド API へのメタデータを渡すためにリクエストヘッダーを設定する必要があるかもしれません。

GraphQL リクエストの最もシンプルなオプションは、GraphQLRequest の headers プロパティを使用することです。

Future<void> queryWithCustomHeaders() async {
  final operation = Amplify.API.query<String>(
    request: GraphQLRequest(
      document: graphQLDocumentString,
      headers: {'customHeader': 'someValue'},
    ),
  );
  final response = await operation.response;
  final data = response.data;
  safePrint('data: $data');
}

別のオプションは、API プラグインの baseHttpClient プロパティを使用することで、すべての HTTP 呼び出しのヘッダーをカスタマイズしたり、HTTP 機能を変更したりできます。

// まず、HTTP 機能を拡張するカスタム HTTP クライアント実装を作成します。
class MyHttpRequestInterceptor extends AWSBaseHttpClient {
  @override
  Future<AWSBaseHttpRequest> transformRequest(
    AWSBaseHttpRequest request,
  ) async {
    request.headers.putIfAbsent('customHeader', () => 'someValue');
    return request;
  }
}

// 次に、Amplify を設定するときにこのクライアントのインスタンスを `baseHttpClient` に渡すことができます。
await Amplify.addPlugins([
  AmplifyAPI(baseHttpClient: MyHttpRequestInterceptor()),
]);