Building a CRUD App with Vue and GraphQL

Building a CRUD App with Vue and GraphQL

In this tutorial, we’ll learn to build a CRUD app with Vue and GraphQL.

Prerequisites

You will need several prerequisites for this tutorial:

  • Node.js and NPM installed on your development machine. You can go to the official website for downloading both of them or use NVM to easily install Node.js in your system.
  • Knowledge of JavaScript and familiarity with Vue.
  • You have followed the previous tutorial for creating the GraphQL server.

If you have these prerequisites, let’s get started.

Enabling CORS in the Server

Since we are sending requests locally between two different ports which are considered as two separate domains we’ll need to enable Cross-Origin Resource Sharing (CORS) in the server.

First, clone the code from the GitHub repository:

git clone https://github.com/JscramblerBlog/node-express-graphql-api.git

Next, navigate to your project and install the dependencies and the cors module:

cd node-express-graphql-api
npm install
npm install cors --save

After that, open the index.js file and import the cors module:

const cors = require('cors');

Then, add the cors middleware to the Express app:

    const  app  =  express();
    app.use(cors())

Finally, start the server:

node index.js

Your GraphQL server will be available from the [http://localhost:4000/](http://localhost:4000/) address.

Installing Vue CLI 3

We need to install Vue CLI to quickly generate Vue projects and work with them. Open a new terminal and run the following command:

npm install -g @vue/cli

As of the time of this writing, @vue/cli v3.8.2 will be installed on your system.

Creating a Vue Project

Using Vue CLI, let’s proceed to create a Vue project. Head back to your terminal and run the following command:

vue create vue-graphql-demo

When prompted to pick a preset, you can simply select the default one.

Wait for your project to be generated and run the following commands to start the development server:

cd vue-graphql-demo
npm run serve

Your app will be running on the [http://localhost:8080/](http://localhost:8080/) address.

Building a CRUD App with Vue and GraphQL

Installing the Apollo Client

Apollo is a set of utilities to help you use GraphQL in your apps. It's well known for its client and its server. Apollo is developed and maintained by the Meteor Development Group.

Open a new terminal, navigate to your project’s folder and run the following command to install the Apollo client in your Vue project:

npm install --save vue-apollo graphql apollo-boost

Apollo Boost is a zero-config way to start using Apollo Client. It includes some common defaults, such as the recommended InMemoryCache and HttpLink, which come configured for you with the recommended settings. It's suitable for starting to develop fast.

In the src/main.js file, add the following code to create an instance of the Apollo client and connect it to our GraphQL server running at [http://localhost:4000/graphql](http://localhost:4000/graphql):

    import ApolloClient from "apollo-boost"
    import VueApollo from "vue-apollo"

    const apolloClient = new ApolloClient({
      uri: "http://localhost:4000/graphql"
    })

    Vue.use(VueApollo)
    const apolloProvider = new VueApollo({
      defaultClient: apolloClient,
    })

We import Apollo Client from the apollo-boost package and VueApollo from the vue-apollo package. Next, we create an instance of the Apollo Client and we pass in the URL of our GraphQL endpoint.

Then, we use the VueApollo plugin to integrate Apollo with our Vue application.

Finally, we create the Apollo Provider which holds the instance of the Apollo Client that will be available to all Vue components.

All we have to do now is adding the Apollo Provider to the Vue instance using the apolloProvider option:

    new Vue({
      render: h => h(App),
      apolloProvider,
    }).$mount('#app')

That’s it. We are now ready to use the Apollo client in our Vue app.

See the docs for more information.

Consuming the GraphQL API

After adding vue-apollo to our app, all our components can use Apollo through the apollo option.

First, open the src/App.vue component and add the data() function to the exported object with the following variables:


    export default {
      name: 'app',
      data(){
        return {
          id: null,
          firstName: '',
          lastName: '',
          email: ''}
      },

We define four component variables, which are id, firstName, lastName, and email. These will be bound to the HTML form for creating a new contact.

Sending a GraphQL Query for Reading Data

Next, import gql from the graphql-tag package and add the apollo object to the component with the query that we’ll be making to read the contacts from the GraphQL API:


    import gql from 'graphql-tag'

    export default {
      name: 'app',
      /* [...] */
      apollo: {
        contacts: gql`query {
          contacts {
            id,
            firstName,
            lastName,
            email
          }
        }`,
      },

gql is a JavaScript template literal tag that parses GraphQL query strings into the standard GraphQL AST. Find more information from the official repository.

In the apollo object, we added a contacts attribute that will hold the results of the contacts query. Later, we’ll use it to display the contacts in the template.

Sending Mutation Queries for Creating, Updating and Deleting Data

Next, add the createContact(), updateContact() and deleteContact() methods as follows:

      methods: {
        createContact(firstName, lastName, email){
          console.log(`Create contact: ${email}`)
          this.$apollo.mutate({
              mutation: gql`mutation createContact($firstName: String!, $lastName: String!, $email: String!){
                createContact(firstName: $firstName, lastName: $lastName, email: $email) {
                  id,
                  firstName,
                  lastName,
                  email}
              }`,
              variables:{
                firstName: firstName,
                lastName: lastName,
                email: email
              }
            }
          )
          location.reload();
        },
        updateContact(id, firstName, lastName, email){
          console.log(`Update contact: # ${id}`)
          this.$apollo.mutate({
              mutation: gql`mutation updateContact($id: ID!, $firstName: String!, $lastName: String!, $email: String!){
                updateContact(id: $id, firstName: $firstName, lastName: $lastName, email: $email)
              `,
              variables:{
                id: id,
                firstName: firstName,
                lastName: lastName,
                email: email
              }
            }
          )
          location.reload();
        },
        deleteContact(id){
          console.log(`Delete contact: # ${id}`)
          this.$apollo.mutate({
              mutation: gql`mutation deleteContact($id: ID!){
                deleteContact(id: $id)
              }`,
              variables:{
                id: id,
              }
            }
          )
          location.reload();
        },    
      }

In the three methods, we use the this.$apollo.mutate() method to send mutations to the GraphQL server and we call the location.reload() method to reload the page.

See the docs for more information about sending mutations.

Next, add the selectContact() and clearForm() methods in the methods object:

        selectContact(contact){
          this.id = contact.id;
          this.firstName = contact.firstName;
          this.lastName = contact.lastName;
          this.email = contact.email;
        },
        clearForm(){
          this.id = null;
          this.firstName = '';
          this.lastName = '';
          this.email = '';
        }

These two methods will be used to select a contact from the table into the form and clear the form.

Adding the Template

Let’s now add a table and form for displaying, creating, updating and deleting contacts. Let’s start with the HTML table:





         First Name
         Last Name
         Email
         Actions



         {{ contact.firstName }}
         {{ contact.lastName }}
         {{ contact.email }}





We use the v-for directive to iterate over the contacts property of the Apollo object which holds the contacts fetched from the server. We also add two buttons for selecting and deleting the corresponding contact.

Next, let’s add the form below the table:



          First Name



          Last Name



          Email










We created a form with three inputs that are bound to the firstName, lastName and email variables declared in the component. We also added three buttons for creating a new contact, updating a selected contact and clearing the form.

This is a screenshot of the UI after adding a bunch of data:

Building a CRUD App with Vue and GraphQL

After selecting a contact using the Select button, it will be loaded in the form and the Update button will appear instead of the Add button:

Building a CRUD App with Vue and GraphQL

Conclusion

In this tutorial, we’ve learned how to use the Apollo client to consume a GraphQL API. We’ve seen how to install Apollo, how to integrate it with Vue.js and send queries and mutations to read, create, update and delete contacts from the database.

You can find the source code of this demo for this GitHub repository.

vue-js graphql node-js express api javascript

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

[Hindi] Express.js Tutorial: Build RESTful APIs with Node and Express - Part 1

Express.js Tutorial: Building RESTful APIs with Node Express. nodejs tutorial with api building with get and post methods.

How to Build a GraphQL API with Node.js, Express and Mongoose

Get started with GraphQL, and build your first API.

Creating a RESTful Web API with Node.js and Express.js from scratch

In this article, will show you step by step how to create a RESTful Web API with Node.js and Express.js by building a simple and useful Todo API. This article assumes you have basic javascript knowledge and terminal using capabilities.

Build a REST API with Node JS and Express | CRUD API Tutorial

Learn everything you need to know about creating a simple API using Node and Express. What is a REST API? There are some more often used terms and technologies when building APIs such as Express, Node, Postman, and a CRUD API.

Node, Express, PostgreSQL, Vue 2 and GraphQL CRUD Web App

A comprehensive step by step tutorial on building CRUD Web App using Node, Express, PostgreSQL, Vue 2 and Graphql CRUD Web App