Connect your app code to API

In this guide, you will connect your application code to the backend API using the Amplify Libraries. Before you begin, you will need:

• Your cloud sandbox with an Amplify Data resource up and running (npx ampx sandbox)
• A frontend application set up with the Amplify library installed
• npm installed

Configure the Amplify Library

When you deploy you're iterating on your backend (npx ampx sandbox), an amplify_outputs.json file is generated for you. This file contains your API's endpoint information and auth configurations. Add the following code to your app's entrypoint to initialize and configure the Amplify client library:

Configure authorization mode

The Authorization Mode determines how a request should be authorized with the backend. By default, Amplify Data uses the "userPool" authorization which uses the signed-in user credentials to sign an API request. If you use a allow.publicApiKey() authorization rules for your data models, you need to use "apiKey" as an authorization mode. Review Customize your auth rules to learn more about which authorization modes to choose for which type of request. A Default Authorization Mode is provided as part of the amplify_outputs.json that is generated upon a successful deployment.

Set authorization mode on the request-level

You can also specify the authorization mode on each individual API request. This is useful if your application typically only uses one authorization mode with a small number of exceptions.

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;

Set custom request headers

When working with the Amplify Data endpoint, you may need to set request headers for authorization purposes or to pass additional metadata from your frontend to the backend API.

The simplest option for GraphQL requests is to use the headers property of a GraphQLRequest.

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');
}

Another option is to use the baseHttpClient property of the API plugin which can customize headers or otherwise alter HTTP functionality for all HTTP calls.

// First create a custom HTTP client implementation to extend HTTP functionality.
class MyHttpRequestInterceptor extends AWSBaseHttpClient {
  @override
  Future<AWSBaseHttpRequest> transformRequest(
    AWSBaseHttpRequest request,
  ) async {
    request.headers.putIfAbsent('customHeader', () => 'someValue');
    return request;
  }
}

// Then you can pass an instance of this client to `baseHttpClient` when you configure Amplify.
await Amplify.addPlugins([
  AmplifyAPI(baseHttpClient: MyHttpRequestInterceptor()),
]);