Integrate AWS GraphQL in your Ionic/Angular applications using Amplify.

This tutorial will show you how to integrate your Ionic/Angular apps using AWS Amplify to access your DynamoDB tables. For this tutorial, we will create an Ionic/Angular project and we will be adding the Amplify support to integrate our Ionic app with the AppSync/GraphQL service.

I’ve created a GitHub repository that contains all the source code used in this tutorial. You can download it to see all the changes and configurations details.

Before beginning, in my previous post I showed how to integrate an Ionic app with AWS Cognito using Amplify. There were a lot of commands. I recommend you to read that post first before continuing if you are new to using Amplify. Furthermore, I will use many of those commands here and without an exhaustive explanation. Let’s start creating our initial Ionic project and open it with your preferred IDE (in my case IntelliJ 😉):

# ionic start ionic-amplify-graphql-example sidemenu --type=angular
# cd ionic-amplify-graphql-example
# idea .

In this example, we will be creating three tables on DynamoDB to represent open positions in different companies. Each company is associated with a specific location (country and city). The entity relational diagram (ERD) looks like this assuming we are working with relational data:

Well, create our initial home page and update the “app-routing.module.ts” to navigate to this page by default. Compile and deploy the project locally to see if all is working correctly:

# ionic generate page pages/jobs
# ionic build
# ionic serve

Delete the example “folder” page and update the side menu. Also delete the options that we will don’t use. The only options that we will be using in the “app-routing.module” are:

Now it’s time to initialise the Ionic project with Amplify and add an API with GraphQL:

# amplify init
# npm install aws-amplify
# amplify add api

Before pushing our API to AWS, let’s modify the GraphQL schema file that you can find in “amplify/backend/api/ionicamplifygraphqlapi/schema.graphql”. This file must contain the model of our DynamoDB tables to be created on AWS. For our app, the file must include the following:

Compile the schema file to see it’s all right, and then push those changes to AWS:

# amplify override api    // to override table names.
# amplify api gql-compile
# amplify status
# amplify push

Update the “src/main.ts” file to contain the following code:

You will need to populate some data on DynamoDB before deploy the app in your local machine if your want to visualise that information in the app. I provide you a shell script in the repo that populate some interesting test data to those tables on AWS. Only you need to execute the following command at the project root:

./load-test-data.sh

And we are ready!! There are some another changes in the app that you can find in more detail cloning the repo from my GitHub account. I can’t show you all those changes because this article will become extensive. But don’t worry, there are no big changes, and I used the app showed in a previous article that you can read if you are interested to become a fullstack engineer.

Now, I will show you some pages of the app, that interacts with AWS GraphQL and display the testing data:

I hope this article have been very interesting for you. Remember to initialize the project with Amplify and made all the configurations showed in this tutorial using your AWS credentials, because these infra must be deployed in your AWS account.

In my next tutorial, I will show you how use the Java Faker library to populate DynamoDB data using AWS SDK for Java. I will be using this app and tables too, to persist the faker data on AWS.

Thanks for reading, and I will see you in my next posts 😉.

--

--

--

Computer Science Engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Going from Zero to Sixty: Building Lyft’s Self-Driving Software Team

Thread Management and Thread Scheduling

SOLID is part of the journey, not the goal

The Power of Quality Assurance — Designing Robust QA Processes for SQL Data Analysis Pipelines

Solve Performance Bottleneck through CQRS

Build a Google Tag Manager monitor with real-time failure notifications using Firebase

How to Build a Video Call & Voice Chat App in WebRTC Using Javascript/node.js?

Open Source Entrepreneurship Promotes Efficient, Collaborative Launches

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Andres Solorzano

Andres Solorzano

Computer Science Engineer

More from Medium

Setup and use Redis with NodeJS

Using the Single Table design on AWS DynamoDB.

Test Controllers in NestJS + Mongo With Jest

Image with Jest, NestJS and MongoDB logo

Storing and Retrieving Unstructured DynamoDB objects in C# with the AWS SDK