AWS Partner Network (APN) Blog
Build a Unified User Experience with Seamless Integration of AWS AppSync and AWS Amplify
By Josh Thornes, Cloud Architect – e360
By Praveen Katari, Partner Management Solutions Architect – AWS
 |
| e360 |
 |
Developing seamless integration between frontend applications and backend services is a common challenge in software development. AWS AppSync, with its flexible and adaptable backend, provides an elegant solution to this problem.
By combining AWS AppSync with AWS Amplify, developers can create a powerful and integrated frontend client. AWS AppSync’s pliable backend allows developers to customize services and data stores, aligning them perfectly with frontend applications. This adaptability ensures a smooth connection between the frontend and backend layers.
Integrating AWS Amplify further enhances this synergy by providing essential features such as security, location services, data management, caching, and more. AWS Amplify’s client libraries streamline the integration process with various AWS services, making it effortless for developers to incorporate these services into their applications.
As more development teams adopt AWS AppSync, the ecosystem of available endpoints expands. However, managing these endpoints and orchestrating their interactions can become complex. This challenge is met by AppSync Merged API, a feature that simplifies the integration of multiple endpoints. It enables teams to effortlessly combine different APIs, creating a unified and cohesive experience for both developers and end-users.
In this post, we will be covering the integration of AWS Amplify client libraries with AppSync Merged API.
e360 is an AWS Specialization Partner and AWS Marketplace Seller with the Digital Workplace Competency. Its robust services portfolio focuses on end-user computing, DevOps, and cloud security and virtualization. e360 builds user experience applications for customers across technology, healthcare, financial, and media and entertainment industries without compromising on security, scalability, or flexibility.
Solution Architecture
This application is built on React Native and uses the AWS Amplify client library to connect to AppSync Merged API. There are two AppSync endpoints (Employee and Department) that are joined together by the EnterpriseCorp AppSync Merged API.
Figure 1 – AWS AppSync deployment architecture.
Building Frontend Components
The frontend application it will be a React Native built on Expo.dev using AWS Amplify client libraries to easily build out a mobile application that connects to the Merged API. Use the Expo.dev Getting Started (TypeScript) page to generate the starting point for this application.
To get started with AWS Amplify, there are two ways to begin:
- Leverage the Amplify command line interface (CLI) to manage services as seen in the React Native Getting Started guide.
- Add Amplify client libraries and have AWS Cloud Development Kit (AWS CDK) manage services as part of your CI/CD pipeline.
Setting Up Authentication
The aws-exports.js file is generated after setting up a backend with the Amplify CLI. Authentication type options available are API_Key, AWS_IAM, Amazon Cognito user pools, and open_id connect. We’ll be using Amazon Cognito user pools as the authentication mode for our setup, but please refer to the documentation for using existing AWS resources to set up authentication.
Connect to create or update the aws-exports.js file following the Amplify guide:
const myAppConfig = {
// ...
aws_appsync_graphqlEndpoint:
'https://xxxxxx.appsync-api.us-east-1.amazonaws.com/graphql',
aws_appsync_region: 'us-east-1',
aws_appsync_authenticationType: 'AMAZON_COGNITO_USER_POOLS' // Configured Auth with Amazon Cognito User Pool ID and Web Client Id
// ...
};
Amplify.configure(myAppConfig);
Configuring the Application
Configure the application with the settings that were just made, as outlined in the guide for configuring your application:
import { Amplify, API, graphqlOperation } from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
Creating a Query
Create a query which can be built by the AppSync user interface (UI) query editor, like the following:
export const qry = gql`
query employees {
TestEmpDataTBS(filter: {id: {eq: "<<replace-with-department-id>>"}}) {
items {
id
name
depId
depname {
dep
}
location
}
}
}
`;
Binding the data
Use query to bind data to the UI; this is typically done in React in a useEffect method:
const leads: any = await API.graphql({
query: qry,
});
Building Backend Components
For building the backend components, we will use AWS AppSync, a serverless GraphQL service, to build two APIs and use merged APIs to merge the two APIs into a single unified AppSync endpoint.
We’ll create an Employee source API and Department source API, and then create a merged API to provide a single endpoint to read the Employee information along with Department data. Please refer to this AWS blog post on introducing merged API on AWS AppSync to set up the merged API.
We will also be using the AWS Management Console to build the APIs. Employee source API will store data related to employees information in an Amazon DynamoDB table, and sample schema structure for the Employee API is below. Default authorization mode for the API will be API Key.
TestEmpDataTBS {
items {
id
name
depId
location
}
}
Department source API will store data related to department information in a DynamoDB table, and sample schema structure for the Department API is below.
TestDeptData {
items {
id
dep
phone
location
}
}
Next, create a Merged API combining both Employee and Department source APIs with DynamoDB as the data source for the tables. After the Merge API is created, join the data across APIs using depID by adding the below definition in the Department API.
Using TestDeptData.depname provides the Department names of Department id. Our resolver will access the depID from context.source and will be resolved using the Employee API.
type TestEmpDataTB {
depID: ID!
depname: TestDeptData
}
We’ll then create a pipeline resolver in the Department API which uses a default request and response resolver code. Create a function with a simple call to GetItem on DynamoDB using the depID from context.source.
Once the function is created, use it in pipeline resolver TestEmpDataTB.depname and attach the function. We will merge the changes to Department API by navigating to settings and then use “Merge Now.”
Please add test data into the data sources using mutation. For example, we’ll use the following mutation to add sample department data in the Department API.
mutation CreateTestDeptData {
createTestDeptData(input: {
dep: “HR”,
location: “Boston”,
phone: “800-887-5209”
}) {
id,
dep,
location,
phone
}
}
mutation CreateTestEmpDataTB {
create TestEmpDataTB (input: {
depID: “<Department id from Department API>”,
name: “John”,
location: “Boston”}) {
id
depname {
id
dep
location
phone
}
name
location
}
}
To test the merged API, we will be using below query to list the data
query MyQuery {
listTestEmpDataTBS {
items {
id
name
depId
depname {
dep
}
location
}
}
}
Please refer to this AWS blog post on AppSync Merged API introduction for information on how to use Merged API and steps to join the data between source APIs.
Application
Once the steps above have been completed, this is what the UI will show having the Merged API with the React Native and AWS Amplify.
Figure 2 – Application user interface output.
Cleanup
- Please clean up all the frontend and backend resources created during the testing process.
- For AWS AppSync, delete Merged API first followed by source APIs.
- Use the DynamoDB console to cleanup source APIs tables.
Conclusion
One of the key advantages of leveraging AWS AppSync is its ability to enhance the client application’s functionality. AppSync ensures security by implementing robust authentication and authorization mechanisms. It also facilitates real-time updates, enabling applications to deliver live data to users, and provides essential tooling for deploying GraphQL APIs which streamline the development and deployment process.
The combination of AWS AppSync and AWS Amplify offers a comprehensive solution for building modern, integrated applications. With AppSync’s adaptable backend and Amplify’s feature-rich frontend capabilities, developers can create secure, efficient, and real-time applications while seamlessly managing multiple APIs. This integration empowers teams to focus on building exceptional user experiences without compromising on security, scalability, or flexibility.
We recommended looking at security best practices, as seen in the following AWS blog posts:
- AWS AppSync Merged APIs Best Practices: Part 3 – Security
- AWS AppSync Merged APIs Best Practices: Part 2 – Schema Composition
To integrate this into the deployment pipeline using AWS CDK, use the CfnSourceApiAssociation class as a starting point.
.
.
e360 – AWS Partner Spotlight
e360 is an AWS Partner whose robust services portfolio focuses on end-user computing, DevOps, cloud security, and virtualization.