Using GraphQL Mutations in Vue.js 👽
Tags: graphql, javascript, vue, hasura
Published: 2018-10-27 12:18:11

---
title: Using GraphQL Mutations in Vue.js 👽
published: true
description: Continuing with my GraphQL journey, in this post we tackle Mutations and some cool Vue features.
tags: graphql, javascript, vuejs, hasura
---

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

In my [last post](https://dev.to/malgamves/vue-x-hasuragraphql-2pki), we started out with a basic application using Vue.js in the front end and a [Hasura](https://hasura.io) powered Postgres database over GraphQL in the backend. 

{% link https://dev.to/malgamves/vue-x-hasuragraphql-2pki %}

That's neat and all but very basic. All we could do was query the database for books I've read and that's it. Like I mentioned at the end of the last post, as we go on we'll get deeper into different Vue and GraphQL concepts. Over the past few days, I added some functionality to the app and this is what it looks like now.

![App Gif](https://thepracticaldev.s3.amazonaws.com/i/jvh85capimaemrvuimn8.gif)

Now I can add all my favorite books through the form on the modal that pops up when I click the *Add a book* button. Click *Refresh List* and you should see the list of books updated with your latest read firmly placed at the bottom 😁

We'll continue where we left off with the previous post. As usual, I'll divide the post into the frontend and the backend portions and go over the changes I made. Previously, the app looked something like this. 

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

## The frontend bit

The aim here was to enable us to add a new book by entering the data into a form. It would not make sense to open up a whole new page just to do this, considering that, I put up a modal that pops up what a button is clicked. In **src > components**, create a new file called **Modal.vue** and paste the following code into it.

{% gist https://gist.github.com/malgamves/ddd65600fa99510e86d258a90d24cb5b %} 

The Modal consists of three sections:
- A header with some text in it
- A body with the form input fields
- A footer with two buttons

We'll go deeper into the body and footer soon enough. Firstly, we need to get the modal visible in the App. The **App.vue** file contains the template that makes up a majority of the webpage we see. In the **App.vue** file, we need to add a few things - the actual modal component, a button that makes the modal visible and another button one that refreshes the page to see the updated list of books. When we add these, your **App.vue** file should look this.

{% gist https://gist.github.com/malgamves/52122a1541f70614c6e28db6262fb35b %}


On a few lines, you notice `@click`, this component is extremely useful and will be used more in other files - when a mouse click event occurs, `@click` calls the method we define on the right of the assignment operator. In **App.vue**, we use it to call `reload()` to get the updated list of books and `showModal` to make the modal appear. We'll also use this to fire up our mutations later on. 

👩‍💻👩‍💻👩‍💻👩‍💻


## The backend bit

This time we barely touch our Hasura API Explorer. The goal for the backend is to add the books we enter into the form in the database. As we all know, our backend is a Postgres database which we access to through a GraphQL endpoint with the help of Hasura. To achieve our goal, we use mutations which are a feature of GraphQL that give us insert, update and delete functionality. The standard format for mutations is shown below.


```graphql
mutation mutation-name {
  mutation-type_table-name (
    expressions to identify row and changing data
  )
  affected_rows
}

```

Checking back at our schema, we have a books table with the following columns. 
- `id`
- `name`
- `author`

Given that `id` is autoincremented, we'll only enter the `name` and `author`. Our mutation should look like this:

```graphql
mutation addBook($author: String!, $name: String!){
        insert_books(objects: [{name: $name, author: $author}]) {
            affected_rows
  }
    }

```

We're calling our mutation `addBooks`, and you'll notice something a little weird with the format, after the mutation name is a group of variables in parentheses. These are mutation variables and enable us to dynamically add data with every mutation as opposed to hardcoding it. We need to paste the mutation shown above into our **graphql.js** like we did the books query in the previous post. The resulting **graphql.js** file will look like this.

{% gist https://gist.github.com/malgamves/1065e20e8c5b3fe89196a29c307bf60c %}

That's it with the backend. 👩‍💻

## 🔩 Gluing everything together 🔩

We've set up the Modal and Mutations and now we have to make sure the inputs of the form become the variables of the mutation. In our **Modal.vue** file, in the `<input>` tag we have a special component called `v-model` that binds that input from the form to a variable called `name` which in the script tag of the same file we export and use in **graphql.js** as a mutation variable. Again we see the use of the `@click` event trigger to call the `addBook` mutation, which adds our form data into the database. Check back with the API Explorer and you will still see the data added ✨. It's really shaping up to be a great app.. well not yet but soon 😉

![App Gif](https://thepracticaldev.s3.amazonaws.com/i/jvh85capimaemrvuimn8.gif)

You can find the latest code for this in the GitHub repo below. 

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


Since I finished this portion, I've had time to think about a few things that could be done better and I'm really looking forward to the next post :D 
I'm also working on a post to explain what I'm actually planning on building, *Spoilers: I'll need your help ya'll*
Till then! Ciao 👋