AWS Amplify does what its supposed to do, making GraphQL easy

Whenever you start a new application, you want to focus on the things that matter for you’re business case. In the example of this application, you want to focus on how you’re application looks and feels when people add new habits. You do not want to focus on whatever back-end operation powers that look and feel. Because, harshly put, for 99/100 users it does not matter how you do it.

We will be leveraging AppSync with AWS Amplify to power our application. It will enable us to store new habits and do many of the other basic CRUD operations, without having to code an extra line.

We will be running through the following chapters:

  • Creating the GraphQL API.
  • Creating the GraphQL Schema.
  • Posting something to our new API.
  • Rendering results from the API on screen.
The architecture that we will user for our demo application

This is a marathon

If you’re just getting on this train, this is part three of this publication. You can find part one here, part two here and part three here.

Building

In this chapter, we will start building the back-end and make an initial connection to our React Native application. This will allow our habit tracker to store habits for our users, as well as render them on screen. In the next post, we will enable authentication for our users so that users are only able to show their own habits. However, for now, this is out of scope.

Lets begin!

Let’s start building our AWS Amplify backend leveraging GraphQL

Adding the GraphQL API

This is where AWS Amplify really shows its value. It’s great that now we have everything properly set up, we can easily add new services to serve our use case without having the hassle of going through the console. This also allows us to easily delete the stack for example, once we are done with it. Of course, there are downsides to every service but for our current use case, it helps us a lot.

In order to add the API, we simply need to use the Amplify CLI:

amplify add api #accept defaults

Authentication

We will choose the GraphQL API and for now protect it with an API key. I would recommend that you let it expire after 7 days, as we will swap it out with AWS Cognito at a later stage anyway.

You can answer no when it asks for an annotated schema and can use the default Single object with fields (e.g., “Todo” with ID, name, description) when asked.

This is all you need to create an GraphQL backend for your application.

Creating our schema

Once you’ve finished adding your API you will find that AWS Amplify has generated a bunch of new folders for you. These are there to help you deploy your resources to your AWS account. One of the important files for you API is the schema.graphql that you can find under:

{projectfolder-root}/amplify/backend/api/{apiname}/schema.graphql

In that file, we want to declare our new schema that we will use for our habit tracker. To make this guide as simple as possible, we will keep it limited to the bare minimum for now. In order to find this bare minimum, we need to start thinking about the design of our application. You will find more about our design, wireframes etc, in part 5 of this series.

This is what our habit’s tracker bare minimum could look like.

The screen tells us more about our user and the way our application needs to function. We can clearly identify the following main components for a habit. A habit needs:

  • To have a title, as ‘not drinking’ or ‘exercise’
  • To have a checkmark per day to show if its done or not done.

Let’s transform these requirements to a new GraphQL schema.

We have created a Habit that contains the title as rendered in the example screen above. It also contains a streak which is an array of DayStreaks. These objects then contain the date and whether the users checked the streak for that day.

With that all set and done, we can push our resources so that it actually deploys them to the cloud. To do so, we can use the amplify push command.

amplify push

When executing this command, it will ask you for a couple of settings. You can use all the defaults and just press enter till it starts deploying your resources. This might take a while, but once its done you should be able to see the new resources in your AWS account under the AWS Amplify service.

You should now be able to see the new project in the AWS Amplify console of your AWS acount.

Post a new habit

I hope you’re able to follow me to this point, and that things have been running smoothly. Personally, I think its great that we are able to set these things up so quickly. It would literally only cost me five minutes from start to finish to set everything up and start focusing on what matters for our users.

In order to post a new habit, we need to re-create the wireframe as shown earlier. To do that, open up your application in Expo by using:

expo start

A new browser window should open where on the left hand side you can open up your emulator of choice. The solution that takes the least of configuration is to just run it in your browser, which is what I will do.

This is what you would get if you run the empty application locally in your browser.

Now lets open up the App.js file in the root of your project and add the input fields that allow us to create the new habits. I’m appending the input fields and some text to the App.js so that the file looks like below. This also includes configuration from Amplify that we’ve done in earlier stories of this publication.

Create the function that stores a new Habit

The last thing we will do in this chapter is to create the function that will add a new habit. To do so, I’ve chosen to store the habit title in the state and created a new function that is triggered on the OnClick event of the button. In order to do so I transformed my App.js function to a class that extends the React Component. I’ll paste the full code below so that you can see what I mean.

However, first, we need to import the auto generated mutations and queries that are in our project ever since we did the Amplify push. To do so, you can import at the top of your App.js:

import { API, graphqlOperation } from 'aws-amplify'import { createHabit } from './src/graphql/mutations'import { listHabits } from './src/graphql/queries'

Then, we create the function that will leverage those libraries to store our new Habit in DynamoDB.

Lastly, we edit our button and input fields so that we can use the input to call on the newly created function.

You should now be able to enter a new habit in your input text field and press the ADD button. This will add a new habit to your DynamoDB. There’s just no way to see it yet…

Navigating our way to the end of this chapter, almost there.

Render the habit on screen

The final piece of this chapter is to render all the habits we created on the screen. Thanks to AWS Amplify, it’s really really simple.

We already imported the function for this and thus only need to add something in our ComponentDidMount so that we render it every time we open up this screen.

We first add an empty array to our initialized state that we call habits. We will populate this on the componentDidMount and call a map function on it in our render function. What does that look like?

In the ComponentDidMount we will call on the ListHabits function that we imported to fill this empty array with items from our DynamoDB.

Lastly, render the habits from the array on screen in your render.

And that should be it! If you now navigate back to the emulator running in your browser, you should be able to see your previously appended Habit in your screen. If you get any errors, please check the complete App.js file below to see if anything is missing.

Conclusion

Congratulations! These are big steps in understanding how we can leverage AWS Amplify to get started. We now have set up our API connection and in the next step will replace the API key that we used with a proper Cognito user authentication. That will enable our users to create private habits and register for our application.

Thanks, and again if any questions arise, feel free to reach out.

--

--

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
Mart Noten

Mart Noten

A builder from the https://www.nbtl.blog writing technical articles focussing on cloud technologies.