Using GraphQL Mutations in Vue.js 👽

In my last post, we started out with a basic application using Vue.js in the front end and a Hasura powered Postgres database over GraphQL in the backend.

Vue x Hasura GraphQL

Daniel Madalitso Phiri ・ Oct 18 '18

#graphql #javascript #vue #hasura

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.

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.

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.

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.

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.

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:

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.

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 😉

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

malgamves / dovue

A quickly changing Vue project

danvue

This project changes quite a lot, keep track of it with the blog posts I write on it.

Project setup

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Run your tests

yarn run test

Lints and fixes files

yarn run lint

View on GitHub

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 👋