In this guide, you will connect your application code to the backend API using the Amplify Libraries. We will review how to install and configure Amplify Libraries.
Before you begin, you will need:
The Amplify Library is the recommended client library used to connect to your GraphQL APIs. To install the the Amplify client library, navigate to your frontend's root folder and run the following command in your Terminal:
Configure the Amplify LibraryYou will then configure the library to connect with the Amplify CLI-provisioned API or you existing AppSync GraphQL API:
When you deploy your backend (amplify push), an amplifyconfiguration.json file is generated for you. This file contains your API's endpoint information and auth configurations.
Make sure you call Amplify.configure as early as possible in your applicationâs life-cycle. A missing configuration or NoCredentials error is thrown if Amplify.configure has not been called before other Amplify JavaScript APIs. Review the Library Not Configured Troubleshooting guide for possible causes of this issue.
To connect your app code to your GraphQL API, you need to provide two configurations:
The Amplify Library connects you to a GraphQL API endpoint based on the information provided to Amplify.configure().
When working with existing GraphQL APIs, you must manually provide your API endpoint and auth configurations. First, to configure the GraphQL API endpoint URL, set the endpoint and region values.
Next, configure the appropriate authorization mode to authenticate with the API.
The Default Authorization Mode is the authorization mode that the GraphQL API should be authorized with when no other authorization mode is specified at the request time.
The Default Authorization Mode is provided as part of the amplifyconfiguration.json if you provisioned your API using the Amplify CLI. If you provisioned your API using other tools, you need to manually set the Default Authorization Mode. Select the default authorization mode from the tabs below to continue:
You can implement your own custom API authorization logic using an AWS Lambda function. To add a Lambda as an authorization mode for your AppSync API, go to the Settings section of the AppSync console.
If you are using a Lambda function as an authorization mode with your AppSync API, you will need to pass an authentication token with each API request and will need to manage token refresh in your application.
Next, when you make the GraphQL API request, you can provide an authToken parameter to add to your request header.
When working with a GraphQL endpoint, you may need to set request headers for authorization purposes or to pass additional metadata from the client to API. This is done by passing a graphql_headers function into the configuration:
You can generate common GraphQL queries, mutations, and subscriptions directly from your backend GraphQL schema. This allows you to avoid hand-authoring GraphQL documents from scratch when developing your API quickly and also provides you end-to-end typing.
By default, when you deploy your API with amplify push, you're prompted to generate client code for GraphQL queries, mutations, and subscriptions. The generated GraphQL documents are stored in src/graphql/**/.
? Do you want to generate code for your newly created GraphQL API
? Choose the code generation language target
? Enter the file name pattern of graphql queries, mutations and subscriptions
? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions
? Enter maximum statement depth [increase from default if your schema is deeply nested]
To customize any of the codegen settings above, run the following command in your Terminal:
Go to your frontend app's root directory and run the following command in the Terminal:
This will download your API's schema and by default generate client helper code into the src/graphql folder. After every API deployment, you can rerun the following command to generate updated GraphQL statement and types:
Use generated GraphQL queries, mutations, and subscriptionsYou can use the generated GraphQL code after you import them into your codebase and pass them into the client.graphql() operation. With GraphQL, you typically have the following types of operations to interact with the API from a JavaScript client:
To learn more about queries, mutations, and subscriptions in more detail, see the guides to Create, update, and delete application data and Read application data.
ConclusionCongratulations! You have finished the Connect your app code to the API guide. In this guide, you reviewed the required configuration and installed and configured Amplify Libraries. You also reviewed some quick ways to write and read this data.
Next stepsOur recommended next steps include using the API to mutate and query data. You can also review how to subscribe to real-time events to look for mutations in your data. Some resources that will help with this work include:
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4