In our previous blog How to create an API endpoint to provision a DynamoDB table using AWS AppSync? (Part 1), we have discussed AWS AppSync, its features, benefits, use cases, etc. In this blog, we will discuss a business scenario to understand and create an API endpoint to provision a DynamoDB table using AWS AppSync.
Business Scenario
Workfall is currently planning to schedule a huge number of events in Singapore. The organization has a Data Analytics vertical and there is a need for the team to perform different types of queries on the API side to perform some analysis. The developer team builds an application for scheduling events. Now for the backend to store the records of the events, the developer’s team has been asked to build and integrate an API that is scalable on-demand and can be easily altered on demand.
After a detailed team discussion, the developer’s team decides to make use of the Amazon Service – AWS AppSync to create an API that will store the data in the DynamoDB. An API created in AWS AppSync can be easily integrated with a web application and it offers a scalable approach for the data analytics team to perform a huge number of queries to fulfill their requirements.
To implement this, we will do the following:
- Login to your AWS Account and navigate to the AWS AppSync console.
- Create a new Event API.
- Clone the react application from the GIT repository.
- Download the config file for javascript from the API Dashboard.
- Paste the config file in the project root folder.
- Install the dependencies for your application.
- Start the server to access the application.
- Create new Events on the application and explore the data stored in the DynamoDB table.
- Explore the DynamoDB dashboard.
- Navigate back to the AWS AppSync dashboard and explore the various flexibilities and the various options available.
- Run the basic queries on the AppSync dashboard to test out the API created.
Login to your AWS console and search for AppSync service. Click on it to navigate to the AWS AppSync dashboard.
You will be navigated to the AWS AppSync Dashboard. Click on Create API to create a new API.
In Step 1, you can customize your API based on your preference. Since we require an API for the Events to be maintained, scroll down on the same page.
Select Event App and once done, click on Start.
You will be navigated to Step 3. On the Create resources dashboard, enter a name for your API configuration and click on Create.
It might take a few seconds for the API to be configured. Wait for some time till your API is ready.
Once done, you will be navigated to the Queries tab of your API to perform queries. We will look at this part in some time.
Now, click on the API name you just created. You will be navigated to a dashboard that guides you on how to integrate the API with your application.
If you scroll down, you will see the commands to be executed to integrate the created API with your application.
Scroll down more and you will see the different Sample repositories provided by AWS to begin.
To get the details of your API, click on the Settings tab on the left pane. You will find all the details needed to be entered into your application while integrating the API.
Now, clone the repository by using the command below to fetch the code for the react application.
git clone https://github.com/aws-samples/aws-mobile-appsync-events-starter-react.git
Open the cloned folder in an editor and cd into the root directory of the application folder using the command cd folder_name.
Navigate back to the AWS AppSync dashboard and click on your API. Under integrate your app, switch to the Javascript tab.
Scroll down and hit the Download Config button to download the aws-exports.js config file to be added to your application.
Now copy-paste the downloaded file in the src folder of your application.
On the terminal in the root project directory, run the command ‘npm install’ to install the dependencies.
Once done, run the command ‘npm start’ or ‘npm run start’ to run the server and access the application on your localhost. It might take some time to start the development server.
On successful compilation, the application will be accessible and you will be available to hit the localhost URL to access the same.
In your browser, in a new tab, access the application on 3000 port number. Now let’s add new events and check if the API is working fine. Click on Create new Event.
A modal will appear to add a new event. Enter in the required details in the corresponding fields.
Once done, click on Save.
You will be navigated to the dashboard of the application and a new event you just created will be visible on the dashboard.
Navigate back to the AppSync dashboard and click on the Data Sources tab in the left navigation pane.
Under the Resources column for the AppSyncEventTable, click on that resource to navigate to the Database in which we are expecting our data to be stored.
You will be navigated to the Amazon DynamoDB dashboard. Click on the items tab on the dashboard to see the data you just added.
You will see a new entry for the event you just created. Click on the entry to cross-check the details and verify the event.
You will find all the details of the event you just created which states that the API has been integrated properly. Now click on the cancel button on the modal.
Navigate to the application and create a new event.
Navigate to the DynamoDB dashboard and hit refresh and you will see a new entry created.
Click on the new entry to verify the event details. You can also export the data to a CSV file. Click on the cancel button.
Select all the entries in the table and click on Actions. Select Export to .csv and a csv file will be downloaded. Open the file to see the output in the csv format.
The table entry output in the csv format.
Now let’s test the delete API call for the newly created API. Navigate back to the React application. Click on Delete for an Event. Click on OK on the modal to confirm.
The event will be deleted from the application home screen. Now, let’s check it out on the DynamoDB dashboard.
Refresh the dashboard and that event entry will be deleted from the database.
The GraphQL query in the QueryAllEvents.js file looks as shown below. This query will fetch an array of event items, each containing an id along with some other information.
Now, where exactly is this data coming from? Navigate back to the AppSync console to see what’s going on! Go to the dashboard for the events API and click on Schema in the left navigation pane that generated the API for us when we created the API. In this schema, we will see the correlating type called Event along with the listEvents query.
Now, how does the database deal with the queries and mutations? That’s possible because of Resolvers. Resolvers offer a way to link database tables (in our case, DynamoDB) to individual queries and mutations.
You can view, attach, and edit resolvers from the Schema view by either clicking on an existing resolver or clicking the Attach button next to an existing data type.
Navigate to the Schema dashboard and you can also edit an existing schema or create a new one. Click on Create Resources.
Over here you can create a new Schema based on your requirements.
Scroll down on the same page and you will see the types merged into your schema offered by GraphQL. Now click on the Queries tab in the left navigation pane.
Over here you can test your API execution by running the queries you like.
The middle column is where you can write your queries known as Mutations. A default mutation to create or list an event already exists in the text pane. Now click on the Play button and select ListEvents.
For the events you created on the react application above, you will see the output with the details of those events. To change the columns, you can edit the mutation based on your requirements.
In the first column, you will get to see some events and the columns in the API schema created above. You can check the box for the columns you need to display in the final output.
Click on the play button and select CreateEvent to create a new event. A new event will be created and the 3rd column will display the result of the executed query.
Now again click on play and select ListEvents and you will see all the events in the 3rd column.
Paste the below mutation in the 2nd column to test out the select query with the where clause.
In the 1st column check the column you wish to view in the output.
Hit the play button and you will see the query result output in the 3rd column displaying the results of the event you entered the id for.
Conclusion
In this blog, we explored the various features of AWS AppSync Service and also saw it in action for a business use case creating a new API endpoint that provisions a DynamoDB table and testing out the API via a react application. We also explored the DynamoDB Dashboard and executed some basic queries to test the functionality of the API. We will discuss more use cases of AWS AppSync in our upcoming blogs. Stay tuned to keep getting all updates about our upcoming new blogs on AWS and relevant technologies.
Meanwhile …
Keep Exploring -> Keep Learning -> Keep Mastering
This blog is part of our effort towards building a knowledgeable and kick-ass tech community. At Workfall, we strive to provide the best tech and pay opportunities to AWS-certified talents. If you’re looking to work with global clients, build kick-ass products while making big bucks doing so, give it a shot at workfall.com/partner today.
