AWS Amplify for React/React Native Development — Pt 3 Integrating GraphQL with AWS AppSync

Continuing on in my series of use cases for AWS Amplify — this week’s article is going to be on integrating a GraphQL Api into your existing React App.

We are going to be keeping it simple so our demo will not include any styling right now. We are just going to focus on creating a basic GraphQL database and then rendering that onto a React front end.

So if you’ve followed along until now you will have installed the Amplify CLI, setup your AWS Console, and configured your Authentication with Amazon Cognito. If you navigate to your page you are immediately prompted to sign in. Once in you are going to see the regular old Create React App loading page but with the addition of a logout button.

Like this:

So what is AppSync and how does it help us?

In it’s most basic sense, AppSync is the AWS service that allows you to easily set up GraphQL APIs! For us it’s going to be useful for setting up a database we we can work with to render objects. It can also do a lot of extra things like authentication and authorization (for filtering what data can be seen by whom). For more experienced AWS users it can be used in conjunction with other AWS services. It also updates our information in real time when the database is updated. Pretty nifty.

Getting Started

So the same way we started authentication with “amplify add auth” we are going to start the api with

amplify add api

After which you are going to get a series of prompts. We are going to choose simple responses to these options for the purposes of this walk through but feel free to fiddle with it and make it your own.

The options I selected are illustrated in the image below

I chose single object like a to-do list

Let’s talk through some of these choices:

1. We are making a GraphQL API. I chose GraphQL because I am currently just trying to learn more about using GraphQL in general. The way that AppSync functions, it is made very easy for beginners.
2. Named it “myapp”
3. For authorization purposes (think like JWT tokens to get the info!) I chose Amazon Cognito User Pool because we already set it up in the previous post. This way we can continue integrating all the things we have already been using. You can use whichever authentication you would like.
4. Advanced settings? This is a super beginner setup so no way Jose
5. We don’t already have a schema
6. We choose single object with fields to keep this super straightforward.

Once that is all entered you want to wait for it to compile successfully. When it does you will see -

If you are seeing this than your schema has been created in your project files. Navigate over to your code editor and checkout amplify/backend/api/myapp and you will see a schema.graphql file that looks like this :

What we are seeing here is the beginning of your database! Congrats!

Before we get going typing in information to our schema, let’s go back to the terminal and type amplify status. You should see a table with our various amplify creations.

We have an Auth from before and our new API!

It should say “Create” under the API because much the same as we would need to do for a Github Repo — we still have to push this new creation up off of our local device into the AWS console. So lets run

amplify push

and when it asks if you want to make the changes say “Y”. If it asks if you want to generate code for the API say “N” for now.

The next bit is going to take a while so take a break and stretch your legs while Amplify does all the work for you.

When its done you should see

✔ All resources are updated in the cloud
GraphQL endpoint: https://f4xha3yjf5dcdaz2ez47p5sysu.appsync-api.us-east-1.amazonaws.com/graphql

Check it out on the Console

So you got this far. Great! Make your way over to your AWS console and pull up AppSync.

If you click on AppSync you should see a screen that lists what API’s you have created. Ours is listed as “myapp-dev”.

If you click on that you be inside the navigational menu for your app’s API. In the Nav bar on the left you should see

• Schema
• Data Sources
• Functions
• Queries
• Caching
• Settings
• Monitoring

If you check out Data Sources you will see that Todo list table that was created by default since we didn’t edit our schema in the first place. If you head over to Schema you will see all the ways you can put in requests to your API. Take a second and browse these and then head over to queries.

Hopefully you will be prompted to see the Explorer on the left hand side. This makes it even easier to figure out how to query your database. If not, just follow along with the commands that I give and if you want to do a different type of query remember you can always look in the schema for ideas or do a quick google search.

I was actually entirely unfamiliar with GraphQL querying before this so having the prompts really helped me out.

Lets say I want to get my list of To-Dos -

In the Explorer you can select Query from the dropdown and then click listTodos and items to return all the available information. As you do this the query will autocomplete.

Now remember when we set up our authentication in Part 2? If you try to run this query without being logged in as one of the users you previously created you are going to get an error because we set up Authentication from user pools in our API configuration!

By the big orange play button — select Login with User Pools. From the dropdown you should be prompted for a ClientId. Selected the web one and then for username and password use the information of one of your previously created users.

All set?

Run it by pressing the Play button.

Oh look — you get back a whole lot of nothing..

You get an empty array back because you actually haven’t created any Todos on your list! Lets do that now. On the drop down select “Mutations” and “+”, then createTodo and the equivalent fields you want to enter.

“Fill in the blanks” if you will in the query and then when you click the play button it will ask you which query you would actually like to send. Select myMutation and you should see

Voila!

Do a few more. Then when you click play select MyQuery to show that original request again for items and you’ll see whatever you created.

Now is a good time to take a break if you haven’t. Get a sip of water, play around with the queries and see what you can create, delete, etc.

Rendering our API into our React App

So lets get this printing out into our app.

In our code editor, head into your App.js file and create a constant that has the query you just made to list the To do list. You can do this by hand or honestly its easiest if you just copy and paste it from the AWS console.

const listTodos = `
       query MyQuery {
            listTodos {
                items {
                   id
                   name
                   description
                 }
            }
        }
`

Note: you can actually name the constant anything and also name the query anything really. The only thing that has to definitely stay the same is the actual request of listTodos. Therefore, for the sake of consistency it’s probably best to name them all the same thing which is what I will do going forward.

Next you will want to import useState and use Effect hooks from React as well as a few more helpers from aws.

import React, (useState, useEffect} from 'react';
import {API, graphqlOperation, Amplify} from 'aws-amplify';

API and graphqlOperation are functions provided by AWS amplify that allow us to access any Api’s we have created.

Just like you normally would for a fetch request you want to set the list to be shown after the page has rendered so that you don’t get an error while awaiting the return of the information. I’m going to go ahead and delete the existing return statement in App.js and create a conditional rendering of the list items once the request has completed.

Check it out below with provided annotations: