AWS: Appsync + Angular 7 + Amplify + Cognito- Part 3

Appsync + Amplify

We will be learning how to integrate Appsyn with an Angular 7 App using Amplify. In the previous tutorial, I have shared some insights on Appsync subscriptions. Let's get started.

Download:

Please fork the complete project from my Github.

Project Structure

Project Structure

Amplify Setup

1. Refer to the amplify generic instructions mentioned in this article.
2. In the aws-exports.js include the Appsync configuration as well.

Angular 7

1. services/graphql/API.service.ts

2. pages/dashboard

• dashboard.component.html

• dashboard.component.ts

Note: We have included functionality to unsubscribe subscribed function.

Queries on Vehicle

1. To Create a Vehicle.

Create a vehicle

2. To Query a Vehicle.

Query a vehicle

3. To update a Vehicle Location.

Update Vehicle Location

Output

Initially when the App loads, we have the last known data of CAR4, in the GraphQL Query Section. When we push updates via mutate-function (updateVehicleLocation), the data is reflected in the GraphQL Subscribed Data Section. When you unsubscribe, the data is no longer updated in the Subscribed Data section.

Note: To verify that you are only subscribed to CAR4 updateLocation changes, try pushing mutate changes for CAR1 and see if you are receiving those updates. Ideally, you won’t.

What next?

You can deploy this web app in AWS Cloudfront. The instructions will be similar to this: Deploying Angular App in Cloudfront with SSL.

Found it Interesting?
Please show your support by 👏.