Todo App with Hasura GraphQL Engine using Angular 6
With this article, you’ve come across one of the very few tutorials found on the web to set up a todo list application with Hasura’s GraphQL engine and Angular 6.
On this note, let's dive in with what’s what of this Tutorial. We’ll be answering the following questions:
- What really is GraphQL?
- What is Hasura and does the Hasura’s GraphQL engine do?
- How can we get started with the basics functionalities in Angular 6?
- How to add authentication with Auth0 and make user-specific queries?
Let's dive right in!
What is GraphQL?
TL’DR: GraphQL is a syntax that describes how to ask for data and what to get in return.
GraphQL is an open source data query and manipulation language, and a runtime for fulfilling queries with existing data. It is designed to build client applications by providing an intuitive and flexible syntax and system for describing their data requirements and interactions. It was developed by Facebook in 2012.
With GraphQL, we have only one API endpoint. Unlike REST frameworks were need to define several API endpoints for different operations to interact with the database. GraphQL lets you write direct queries mentioning what you really want to add and what you really want in return.
Where does Hasura and it’s GraphQL engine step in?
Hasura’s GraphQL Engine
The Hasura GraphQL Engine is an extremely lightweight, high-performance product that gives you instant realtime GraphQL APIs on a Postgres database. This can be used to quickly build new applications on Postgres or fast-track the move to GraphQL for existing applications on Postgres.
It comes with a UI that lets you create and view tables on your database and make GraphQL queries using the embedded GraphiQL interface.
Let’s do some coding!
Setting up your PC.
To set up Angular for Hasura on your PC, open the terminal and run following commands.
# Installing Angular CLI globally.
$ npm install -g @angular/cli# Make a new Angular application.
$ ng new hasura-todo-app --routing
$ cd hasura-todo-app# Starting Angular server at port 4200.
$ ng serve
You’ve now set up an Angular app that will interact with your Hasura Engine. You can view it at https://localhost:4200. It would look like this below.
Now we need to set up Apollo client.
Apollo client is designed to help you quickly build a UI that fetches data with GraphQL, it works with every GraphQL server implementation, for every language. To install Apollo run the following.
# Install GraphQL and Apollo Client.
$ npm install apollo-angular apollo-angular-link-http apollo-client apollo-cache-inmemory graphql-tag graphqlSetting up Hasura Engine on Heroku’s free tier.
Now we need to setup Hasura’s Engine on Heroku to interact with our Angular todo list application. Follow this link to visit Heroku and setup your app. Your app will be deployed at https://<your-app-name>.herokuapp.com The process should resemble like below:
Currently, your API endpoint is accessible by anyone, but we do not want that. So we’ll add a config variable at Heroku to authenticate the endpoint. Remember this variable will be sent to Heroku on every call to Hasura Engine. The variable name will be HASURA_GRAPHQL_ACCESS_KEY. Below is an example:
Upon setting up the Heroku settings, head over the deployed app to create the table. To do so:
- Click on the table tab and type the table name.
- Type the field names as
id,is_completed,userandtext. - Set the default value of the
is_completedfield to false. - Set the primary key as the
idfield.
Now head over to the permissions tab to set permissions for the user. Add a field user and edit the permissions for the given methods.
- For insert, click
With Custom Checkand add the following values.
- For select, click
With same checks as insert. - For an update, click
With same checks asand select only theis_completedfield. - For delete, click
With same checks asand select all.
Setting up Auth0 with your Angular 6 app.
Head over to https://auth0.com to set up your application that will log in with your Angular app.
- Create a new application on Auth0.
- Type in a name and select
Single Page Applicationand press create button. - Select the tutorial for Angular2+ application and follow the tutorial.
- In callback Url, remember to put
http://localhost:4200as we need to redirect after login.
Configuring Apollo Client to interact with Hasura Engine.
Till now we can log in in our angular app and all the tokens and other info are stored in our local storage of angular. Now we need only the Apollo Client which will interact with Hasura.
For better organization let’s create a module using ng g m GraphQl and import in AppModule like this:
Let’s go ahead and create several components which will handle all the queries. Here’s how
ng g c list/addItem: This component will be used to add items to the list.ng g c list/viewItems: This component will be used to view items and perform operations on the list
Our GraphQL Module would look like this:
We would be defining queries and mutations to fetch data and perform operations on it. Let’s create a query.ts file for the same. The schemas for different queries and mutations could be found at the API Mutation Reference Manual.
There will be 4 kinds of operations we’ll be doing:
- Get Query:
This query will get all the rows in the todo_list table and only the columns id, text andis_completed from the table
- Insert Mutation:
This Mutation will be used to insert the object in the table. We are returning id, text, is_completed anduser .
- Update Mutation:
This update mutation will update the field is_completed to a new value when the wherequery is matched.
- Delete Mutation:
This delete query will delete the row for which where query is matched. and return the id of the deleted row.
Designing the frontend and respective components
Here’s how add-item.component.ts would look:
In this file, we define someString variable which will be used to bind the value of the input field to itself and will be further used to send the text to the database.
We declare an instance of Apollo as apollo which will be used send the mutation Query.AddMutation to Hasura’s Engine.
Also, here we get the text from the variable this.someString and user from the local storage which is stored at the time of logging in.
After the query is completed successfully, we simply reload the page to clear default values.
Now coming to the view-item.component.ts file where we’ve implemented other three methods. Here’s how it looks:
Here we’ve declared todoItems variable of type Observable<Array<any>> which will be used to store the item list we recieve upon querying. The variable noItemInList is being used here to toggle the text displayed if there’s no item for the user.
We need to make the Get Query as soon as the page loads.
Here we’ve implemented the update and delete methods.
Upon deletion, we are clearing the local variable of the item.
For HTML, we need to do likewise as here:
That’s it! Now run ng serve to start the server at port 4200 and visit http://localhost:4200 to open your app.
Probable bugs:
While running this app, you may notice that just after logging in, you’d need to refresh the page in order for the app to work properly. The reason behind this is just after the callback, the modules are being initialized and during initialization, when it attempts to fetch the localStorage variable like access_token and user_id it fails, because, by that time, the variables weren’t set in the local storage. To fix this, one way could be to simply reload the page after setting the variables. This would reinitialize the variables and your app would work just fine.
For the complete source code and knits on the app visit:
For live working version, visit:
Happy Coding!!
About Me
My name is Siddhant Srivastav, an undergrad student at the Indian Institute of Information Technology, Allahabad.
I love creating. I love to code in Python and JS. I love Open source and contributing in projects I find interesting. Founder of a project called Cythesize.
