Vue x Hasura GraphQL
Tags: graphql, javascript, vue, hasura
Published: 2018-10-18 19:18:20

---
title: Vue x Hasura GraphQL
published: true
description: There's been a lot of fuss over Vue.js and GraphQL lately so I decided to jump on the hype train.
tags: graphql, javascript, vuejs, hasura
canonical_url: https://medium.com/@malgamves/vue-x-hasura-graphql-d66f585a3ba5
---

![Header](https://thepracticaldev.s3.amazonaws.com/i/xt8ztldf1r4hqms6jhrs.png)

There's been a lot of fuss over Vue.js and GraphQL lately so I decided to jump on the hype train.

{% twitter 1042005828532719621 %}

This week I promised myself that I’d have something up, no matter how basic, it should at least demonstrate the use of both technologies.

So I came up with this Web App (*forgive my horrible design*).

![](https://thepracticaldev.s3.amazonaws.com/i/6ajs93bdm1rhpuxyuuoq.gif)
I was serious when I said I would build something basic. I implemented the frontend of the app using Vue.js while I did the backend with [Hasura](https://hasura.io/) which offers real-time GraphQL for Postgres databases. We’ll go through how everything came into place.

## The frontend bit
Like I said above, I did this portion in Vue.js, we’d have to install it before we can go on and to do that we’ll need [node.js](https://nodejs.org/en/) on our system. Once we’ve got node installed, enter the following command to install the vue cli `npm i -g @vue/cli`. To set up a new Vue project, we enter the following command `vue create myapp`, replace *myapp* with whatever you want to name this app and click **default** when prompted to pick a preset. When done initializing, your folder structure should resemble the one below.

![](https://cdn-images-1.medium.com/max/1250/1*HYcFt4gXD23L0ujilE4YmQ.png)

When the app is done initializing, `cd <myapp>` and enter `npm run serve` to run your app. The command line will display a local address that your app is being hosted on, open your browser and go to that address. This should be what you see.

![](https://cdn-images-1.medium.com/max/2000/1*OVIt-0D3nJCcmahPc2dVKw.png)

That’s it with the frontend 🎉(for now).

## The backend bit
Hasura really came in handy for the backend of this little project. Head over to [this page](https://docs.hasura.io/1.0/graphql/manual/getting-started/heroku-simple.html) and click **Deploy to Heroku** — you’ll have to sign into your existing Heroku account or create a new one to continue. When you’re logged in, you’ll have to give your app a unique name after which you can click **Deploy**. Once it’s deployed, head over to <your-app-name>.herokuapp.com to access your Hasura API Explorer, it should look this.

![](https://cdn-images-1.medium.com/max/2000/1*EAcQxWPqIFbGu8mHMCQYeg.png)

A little bit into Hasura, what it does is that it lets us access and perform operations on a Postgres database in real-time using GraphQL. They basically give us a Postgres database and a GraphQL endpoint to access it with a one-click Heroku deployment, *pretty neat!*

The API Explorer lets us play around with our database in the data section and test queries, subscriptions and mutations in the GraphiQL section. Let’s navigate to the **Data** section of the API Explorer and define the schema of our database. Create a table called `books` and go on to create the following columns with these configurations.

- `id`, Integer (AutoIncrement), Unique
- `name`, text
- `author`, text
- Set `id` as the primary key
After this, you can click *create* to make the database table.

Now that we’ve got a `books` table, we’ve got to insert data into it. Under the tables section on the left side of your screen, click on the books table and you should see the screen below.

![](https://cdn-images-1.medium.com/max/2000/1*HwH44MVjReeiBQ4Bo_ScuQ.png)

In the `name` field, enter the name of your favorite book and likewise with its author. The `id` is auto-generated so we don’t need to edit that. Feel free to enter as many books as you like, when you’re done, that’s it with our backend.

## Putting everything together
The way things are right now, we’ve got a Vue App and Postgres database that we can query using GraphQL with the help of Hasura, now we’ve got to put it all together and display your favorite books in the app.

To use GraphQL in Vue, we need to install a few packages first. Run the following command to install them `npm install --save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag`

After that, we add the packages to our **main.js** which should look like this now.

{% gist https://gist.github.com/malgamves/727df43caa0e774b6e15e10184f84ee3 %} 

In the Hasura API Explorer under the GraphiQL section copy your endpoint URI and paste it on line 16 of your **main.js** file replacing the text <Your Hasura URI here>. The URI looks something like this: *http://your-app-name.herokuapp.com/v1alpha1/graphql*.

In **src > components**, delete the **HelloWorld.vue** component and create two new components in the same folder called **BookItem.vue** and **BookList.vue**

In the **src** folder, create a new folder called constants, in **src >constants**, create a new file called **graphql.js** This file will store all our GraphQL queries. The code for **graphql.js**, **BookItem.vue** and **Booklist.vue** is shown below.

{% gist https://gist.github.com/malgamves/3069fd512f93e5503d33f898117b3191 %} 

Next up we edit our **App.vue** file which should look like this.

{% gist https://gist.github.com/malgamves/3ad4b9c80b536bdff208a17097cc8ae4 %} 

In **BookItem.vue**, we interpolate the response from our GraphQL query. We then use the single BookItem component in the BookList.vue file with the help of the `<book-item>` tag to generate a dynamic list of all BookItems which we’ll call a BookList. The `<book-list>` tag used in **App.vue** enables us to display list of all books from the **BookList.vue file**. When we run the app with `npm run serve` you should see all your favorite books appear as shown below.

![](https://thepracticaldev.s3.amazonaws.com/i/6ajs93bdm1rhpuxyuuoq.gif)

You can find the complete app in the `blog-post-1` branch of this GitHub repository.

{% github https://github.com/malgamves/dovue %}

 It’s all really cool! I was amazed at how easy everything was to set up. Evident in this tweet.

{% twitter 1052495254190845952 %}

I’ll be doing this a lot so let's call this Part 1 of an x post series on Vue and GraphQL. In this post, we only dealt with GraphQL queries and a single page Vue web app. As the bigger project unfolds, we’ll go over mutations and subscriptions in GraphQL and routing in Vue. Till the next post 👋