Building a Todo Application using GraphQL and AWS AppSync
In this tutorial, We will build a Todo Application using GraphQL and AWS AppSync.
If you don't know what GraphQL is you should Google and checkout my previous tutorial on GraphQL
What is AWS AppSync?
By their own Definition
AWS AppSync makes it easy to build data driven mobile and browser-based apps that deliver responsive, collaborative experiences by keeping the data updated when devices are connected, enabling the app to use local data when offline, and synchronizing the data when the devices reconnect. AWS AppSync uses the open standard GraphQL query language so you can request, change, and subscribe to the exact data you need with just a few lines of code.
In simple terms, AWS AppSync allows us to write GrapgQL apps easily without worrying about the server or database.
It will make more sense once we start writing some code, So let's get started.
Getting Started with AWS AppSync
Sign in to your AWS Console and open AWS AppSync, Click on the Create API button, After clicking you will see this page (screenshot below)
For API Name enter TodoApplication and for Select a template or custom schema, Select Custom Schema (this is selected by default) and then click on the Create button.
You will see a page like this (screenshot below), Pleake make
You can copy your API URL and API Key or you can find this information whenever you want by opening AppSync and clicking on the Application Name.
In the left Sidebar you can see we have 4 new Links
- Schema: We will use this to design our schema
- Queries: We will use this to test our Queries
- Data Sources: We will use this to store our data
- Settings: This allows us to change API name, Authorization type, etc
What will we be building?
We will build a simple Todo application which will allow us to create different users, each user can have multiple todo lists and each list can have n number of items.
Features:
- User Registration & Login
- Todo Lists (create, read, update, delete)
- List Items (create, read, update, delete)
Let's continue onto our next section where we will Design our Schema.