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.
val query = ModelQuery.list(Todo::class.java) as AppSyncGraphQLRequest<PaginatedResult<Todo>>val apiKeyQuery = query .newBuilder() .authorizationType(AuthorizationType.API_KEY) .build<PaginatedResult<Todo>>()Amplify.API.query(apiKeyQuery, { Log.i("MyAmplifyApp", "Queried with API key ${it.data}")}, { Log.e("MyAmplifyApp", "Error querying with API Key")})val query = ModelQuery.list(Todo::class.java) as AppSyncGraphQLRequest<PaginatedResult<Todo>>val userPoolQuery = query .newBuilder() .authorizationType(AuthorizationType.AMAZON_COGNITO_USER_POOLS) .build<PaginatedResult<Todo>>()Amplify.API.query(userPoolQuery, { Log.i("MyAmplifyApp", "Queried with Cognito user pool ${it.data}")}, { Log.e("MyAmplifyApp", "Error querying with Cognito user pool")})val query = ModelQuery.list(Todo::class.java) as AppSyncGraphQLRequest<PaginatedResult<Todo>>val iamQuery = query .newBuilder() .authorizationType(AuthorizationType.AWS_IAM) .build<PaginatedResult<Todo>>()Amplify.API.query(iamQuery, { Log.i("MyAmplifyApp", "Queried with AWS IAM ${it.data}")}, { Log.e("MyAmplifyApp", "Error querying with AWS IAM")})val query = ModelQuery.list(Todo::class.java) as AppSyncGraphQLRequest<PaginatedResult<Todo>>val oidcQuery = query .newBuilder() .authorizationType(AuthorizationType.OPENID_CONNECT) .build<PaginatedResult<Todo>>()Amplify.API.query(oidcQuery, { Log.i("MyAmplifyApp", "Queried with OIDC authorization mode ${it.data}")}, { Log.e("MyAmplifyApp", "Error querying with OIDC authorization mode")})You can implement your own custom API authorization logic using a AWS Lambda function. Review Customize your auth rules to learn more about how to implement your authorization protocol with AWS Lambda.
val query = ModelQuery.list(Todo::class.java) as AppSyncGraphQLRequest<PaginatedResult<Todo>>val lambdaQuery = query .newBuilder() .authorizationType(AuthorizationType.AWS_LAMBDA) .build<PaginatedResult<Todo>>()Amplify.API.query(lambdaQuery, { Log.i("MyAmplifyApp", "Queried with AWS Lambda authorizer ${it.data}")}, { Log.e("MyAmplifyApp", "Error querying with AWS Lambda authorizer")})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.
To specify your own headers, use the configureClient() configuration option on the AWSApiPlugin's builder. Specify the name of one of the configured APIs in your amplify_outputs.json. Apply customizations to the underlying OkHttp instance by providing a lambda expression as below.
AWSApiPlugin plugin = AWSApiPlugin.builder() .configureClient(AWSApiPlugin.DEFAULT_GRAPHQL_API, okHttpBuilder -> { okHttpBuilder.addInterceptor(chain -> { Request originalRequest = chain.request(); Request updatedRequest = originalRequest.newBuilder() .addHeader("customHeader", "someValue") .build(); return chain.proceed(updatedRequest); }); }) .build();Amplify.addPlugin(plugin);val plugin = AWSApiPlugin.builder() .configureClient(AWSApiPlugin.DEFAULT_GRAPHQL_API) { okHttpBuilder -> okHttpBuilder.addInterceptor { chain -> val originalRequest = chain.request() val updatedRequest = originalRequest.newBuilder() .addHeader("customHeader", "someValue") .build() chain.proceed(updatedRequest) } } .build()Amplify.addPlugin(plugin)val plugin = AWSApiPlugin.builder() .configureClient(AWSApiPlugin.DEFAULT_GRAPHQL_API) { okHttpBuilder -> okHttpBuilder.addInterceptor { chain -> val originalRequest = chain.request() val updatedRequest = originalRequest.newBuilder() .addHeader("customHeader", "someValue") .build() chain.proceed(updatedRequest) } } .build()Amplify.addPlugin(plugin)AWSApiPlugin plugin = AWSApiPlugin.builder() .configureClient(AWSApiPlugin.DEFAULT_GRAPHQL_API, okHttpBuilder -> { okHttpBuilder.addInterceptor(chain -> { Request originalRequest = chain.request(); Request updatedRequest = originalRequest.newBuilder() .addHeader("customHeader", "someValue") .build(); return chain.proceed(updatedRequest); }); }) .build();RxAmplify.addPlugin(plugin);