Cloning Dark Mode List using React Native and AWS AppSync
Learn how to build Dark Mode List App using React Native & AWS AppSync
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.
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.
Go ahead & enter DarkModeList & choose Custom Schema
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.
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.
Creating the Schema
Now select Schema in the Sidebar, clear out the commented code & paste the following -
Now go ahead & click on Save button.
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.
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.
Queries
Now select Queries & clear out the commented code & run the following Mutation -
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 -
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.
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 -
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 -
- 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 ourGraphQL Endpoint
,region
which specifies which Region our Endpoint is at & finallyauth
object. Theauth
object containstype
property, which by default isAPI_KEY
, but for more security you should either choose IAM (including short-term credentials from Amazon Cognito Federated Identities), or Amazon Cognito user pools. - Here we are using the
ApolloProvider
fromreact-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. - Change our default export from
App
toWithProvider
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 -
- First we have our
<Loading />
component that shows a large spinner - Then we have our
<Error />
component which shows error message in red - Next is our
<ListItem />
function which is from thereact-native-elements
UI Kit - 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 -
- Firstly, we are using
createApp
function which we get from the<Mutation />
component. This allows us to send all input variables to our mutation. - Next, we use Optimistic Response which shows our users the updated UI without making a trip to the server
- 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!