Building a WhatsApp Clone with Vue.js and AWS Amplify/

...

/

Adding GraphQL API and DynamoDB

Adding GraphQL API and DynamoDB

Learn how to configure Dynamodb with AWS Amplify CLI.

We'll cover the following...

Introduction

We have successfully created two AWS resources, and now we need to create an API and a database. For the API, we can use either REST or GraphQL. If we are using REST, AWS Amplify will deploy the API Gateway on our behalf. In our case, we will use GraphQL to deploy and configure AWS AppSyncand later generate all the required mutations, queries, and subscriptions.

The Free Tier offers the following monthly usage levels at no charge for 12 months after you sign up for an AWS account. 250,000 query or data modification operations 250,000 real-time updates 600,000 connection-minutes. Use beyond these levels is billed at the published rates. The AWS AppSync Free Tier automatically expires after 12 months.

For the database, we can either deploy AWS DynamoDB or AWS Aurora. In our case, we will deploy AWS DynamoDB, which can effectively scale and meet any workload demands. We will update and query our database using the mutations and queries generated for us.

25 GB of storage and up to 200 million read/write requests per month with the AWS Free Tier

Now that we have understood the resources we want to deploy, let’s create a schema for our application. Our app will have several responsibilities, and we want to group them as follows.

User table

We will have a table where we store the user’s information once they sign up. Let’s create a schema.graphql file, then begin with the user table. Note that when we add ! at the end of a declared variable, we indicate that this variable is mandatory for creating a record in the database. Without the variable, the request will fail.

Press + to interact
# This "input" configures a global authorization rule to enable public access to
# all models in this schema. Learn more about authorization rules here: https://docs.amplify.aws/cli/graphql/authorization-rules
input AMPLIFY { globalAuthRule: AuthRule = { allow: public } } # FOR TESTING ONLY!
type User @model {
  id: ID!
  email: String!
  phone: String!
  image: String
  username: String
  lastSeen: String
  userTyping: String
  updatedAt: String
  createdAt: String 
  contact: [Contact] @hasMany
  conversation: [Conversation] @hasMany
  message: [Message] @hasMany
}

Generally, we can add more fields. We can continually update our schema and push it to our backend.

Contact table

Select a user from our contact list or create a new group to ...