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.

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 when 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 "@clcik", 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.

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

Given that id is auto incremented, we’ll only enter the name and author. Our mutation should look like this:

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 repository below.

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 👋

Daniel Madalitso Phiri

Written by

I speak to computers. They say "01000011 01101111 01101101 01110000 01101001 01101100 01100101 00100000 01000101 01110010 01110010 01101111 01110010"

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade