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.

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 auto incremented, 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 🔩