Integrating AWS GraphQL in an Ionic/Angular App with 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 add 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 configuration 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 read that post before continuing if you are new to using Amplify. Furthermore, I will use many of those commands 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 initialize 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 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 deploying the app on your local machine if your want to visualize that information in the app. I will provide you with a shell script in the repo that populates 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 other changes in the app that you can find in more detail by 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 significant changes, and I used the app shown in a previous article that you can read if you are interested in becoming a fullstack engineer.

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

I hope this article has been fascinating for you. Remember to initialize the project with Amplify and make all the configurations shown in this tutorial using your AWS credentials because this infra must be deployed in your AWS account.

My following tutorial will show you how to use the Java Faker library to populate DynamoDB data using AWS SDK for Java. I will also use this app and tables to persist the faker data on AWS.

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