Cloning Dark Mode List using React Native and AWS AppSync

Learn how to build Dark Mode List App using React Native & AWS AppSync

Checkout https://darkmodelist.com by Andrey Azimov

Introduction

We’re going to create a simple clone of DarkModeList by Andrey Azimov. It is a website which lists all the websites & apps that have a Dark Theme.

Backend

Firstly, we will make our Backend work properly with AWS AppSync & store all the data in DynamoDB. Then, we will dive into the Frontend part with React Native.

What is AWS AppSync?

AWS AppSync, launched at the re:Invent 2017, is a new AWS service which lets you use GraphQL in the cloud & offers you data updates in web & mobile applications in realtime.

It also has built-in offline support so your users can use the application offline & updates will be sent to the server as soon as they reconnect.

It has built-in integration with DynamoDB, AWS Lambda & ElasticSearch. It also has SDKs for Web, Android, iOS & React Native.

Getting Started

Now go ahead Sign Up for an AWS Account if you don’t have one already & then log in to the AWS Console.

Now click on Services & then under Mobile Services section, select AWS AppSync.

Figure 1: AWS Console

Once you are in the AppSync Console click on Create API. I have 3 sample apps so your console will look different if its your first time.

Figure 2: AWS AppSync APIs Console

Go ahead & enter DarkModeList & choose Custom Schema

Figure 3: Create New API Console

Here, we have a menu on the left of us that allows us to explore & edit the Schema as well as we can test our Queries. We can also manage our Data Sources related to the API here & manage Settings.

Figure 4: API URL & Auth Mode

Here, we see our API endpoint URL & auth mode which by default is API_KEY

We also have a Getting Started Guide for quickly getting up & running our frontend. But we won't require it as we will be using our own Custom Frontend. So scroll to the bottom & click on the Download below. Keep the AppSync.js file as we will require it later.

Figure 5: Download AppSync.js for React Native

Creating the Schema

Now select Schema in the Sidebar, clear out the commented code & paste the following -

Now go ahead & click on Save button.

Figure 6: Save Schema

Creating the Resources

We have successfully created the Schema. Now go ahead & click on Create Resources (Figure 7)

This will create resolvers to map the GraphQL request and response between the database and the schema. AppSync will automatically generate this for us.

Select App as the type.

Figure 7: Create Resources

Here, you can change the Table name as well as change the Primary Key or Sort Key. You can also see that AppSync autogenerated the Schema for us which lets us perform all the CRUD operations.

Now go ahead & click on Create at the bottom.

This will create DynamoDB Tables for us & resolvers were created to map between the schema & the table. Also, our schema has been changed. Our new schema will look like -

Go ahead & click on Data Sources in the Sidebar to see our newly created Table.

Figure 8: Data Sources

Queries

Now select Queries & clear out the commented code & run the following Mutation -

Figure 9: Mutation Create App

You should be able to see the id, name & link get back on the right hand side.

Now let us list all apps by sending a Query. Paste the following query to fetch all apps -

You should see the following on the right hand side -

Figure 10: Queries List App

Data Sources

Now select Data Sources & click on AppTable under the Resource column. It will open a New Tab showing our Dynamo DB Tables. Select Items column to see our WIP Chat mutation in the DynamoDB table.

Figure 11: Dynamo DB Table

Now that we have our AppSync Backend working properly, lets dive into the FrontEnd.

Frontend

Now, I will be assuming you are at least familiar with basics of React or React Native. We will start with a simple boilerplate which uses React Native Elements UI Kit so we don’t have to worry much about styling.

Boilerplate code has 2 simple inputs for App Name & App URL & 1 Submit Button. Below that it displays the list of Apps that you have entered.

Clone the boilerplate project from here & install the dependencies with yarn or npm install to get started.

Once you run the app, it should look like -

Figure 12: Dark Mode List App Showcase

Now lets create it to use our AppSync API. Make sure you have AppSync.js file in your root folder which can be downloaded from the AppSync console as mentioned in the Backend Part.

We will be using the Apollo as our GraphQL Client which is a pleasure to work with & has a very simple & straight-forward API.

Go ahead & install the following dependencies -

yarn add aws-appsync aws-appsync-react react-apollo graphql-tag uuid

or if you use npm type

npm install aws-appsync aws-appsync-react react-apollo graphql-tag uuid

Now put the code given below at the top of the file.

Here, 3 things are happening -

1. We are creating a new AppSync client and storing it in the client variable. We are also passing it different parameters like url which links to our GraphQL Endpoint, region which specifies which Region our Endpoint is at & finally auth object. The auth object contains type property, which by default is API_KEY, but for more security you should either choose IAM (including short-term credentials from Amazon Cognito Federated Identities), or Amazon Cognito user pools.
2. Here we are using the ApolloProvider from react-apollo to pass the client that we created above into our application. This gives us access to our AppSync client anywhere in our entire app. Rehydrated waits until the application cache is ready to use in the app before rendering the app itself. By default, it shows loading text but can be easily configured.
3. Change our default export from App to WithProvider

Now go ahead & paste the mutation to create new app. Also, paste the query to list our apps. This is the same mutation & the same query that we ran in the backend part

Now import these 2 files on the top of App.js

Then change the code to render our list of apps as follows -

Now go ahead & replace the following block of code in render function

with the next block of code

There are 4 things happening here -

1. First we have our <Loading /> component that shows a large spinner
2. Then we have our <Error /> component which shows error message in red
3. Next is our <ListItem /> function which is from the react-native-elements UI Kit
4. Finally, we have <Query /> component which shows list of our apps. It uses the Render Prop API which makes it simple to understand. Remove the earlier code which lists the apps & place this chunk of code inplace of it.

This should properly fetch & render the list of apps that are present in our database DynamoDB.

Now let’s go ahead & add <Mutation /> component to create new app.

Again replace the following in render function

with the next block of code

Here, 3 things are happening -

1. Firstly, we are using createApp function which we get from the <Mutation /> component. This allows us to send all input variables to our mutation.
2. Next, we use Optimistic Response which shows our users the updated UI without making a trip to the server
3. We update our local cache with the new app

Conclusion

AWS AppSync opens up a lot of possibilities. You can create real-time apps like Chat Messengers, Social Media Apps or even Dating Apps.

The AWS AppSync Console can be difficult to use & if you our tired of updating or deleting the schema then have a look at serverless-appsync-plugin created by Siddharth Gupta.

You can find the full-source code of Dark Mode List App here.

If you have any questions or just want to say Hi, then feel free to hit me up on Twitter!