How to build crud application using vue js, graphql, and hasura

How to Build
CRUD
Application
using VueJS,
GraphQL, and
Hasura

https://www.bacancytechnology.com/

In this tutorial, we will learn how to build
CRUD application using VueJS, GraphQL, and
Hasura. Don’t be scared of the technical stack;
just stick till the end of the blog, and you’ll be
able to build your basic CRUD app.

Many developers consider GraphQL as a DB
technology, but that’s not true!

GraphQL is a query language – an alternative
to build REST APIs. GraphQL provides an
interface to put-away information that meets
the application’s requirements.

Facebook developed it as an internal
technology for enhancing the app’s versatility
and later released it as open-source. Since then,
the software development community has
utilized it as one of the favorite technology
stacks for developing web services.

Tutorial Goal:
Build CRUD
Application
using VueJS,
GraphQL, and
Hasura

Before moving towards building a basic CRUD
app, watch the below video to understand what
we are building.

Prerequisites

Basic knowledge of VueJS and GraphQL
VS Code or any other IDE
Familiarity with Javascript and HTML
https://youtu.be/GvA7N1uB86g
Below is the Video link

Basic knowledge of VueJS and GraphQL
VS Code or any other IDE
Familiarity with Javascript and HTML

Firstly you need to sign up to Hasura cloud.
Visit hasura.io to do the same.

Hasura instantly lets your apps query, update,
and receive real-time notifications of your
data with GraphQL. After successful signup,
you have to connect your database. Either you
can use any existing database or create from
Heroku it’s for free.

Once done with creating or connecting your
database, let’s move to the code section.

Build well-performing and cost-effective
VueJS applications with Bacancy.
We have proficient developers with the best
technical insights and problem-solving
skills. Hire VueJS developer from us and
start building applications of your choice!

Initial Set-Up
and
Installation

You can create a new VueJS application or
use an existing application.

Here I am using a fresh vue application by
setting up using vue-cli. So here is the
command to create the application.
vue create vue-graphql-demo
Run the below command to install all
the dependencies.

npm install vue-apollo@3.0.0-beta.28
apollo-cache-inmemory apollo-link-
http apollo-client graphql-tag
graphql --save

Then create one file named apollo.js under
the src/ and register all the packages below.

// apollo.js
import Vue from 'vue'
import VueApollo from 'vue-apollo'
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-
inmemory'
const httpLink = new HttpLink({
// You should use an absolute URL here
uri: 'https://your-
app.hasura.app/v1/graphql',
headers: {
"x-hasura-admin-secret": "token"
}
})

// Create the apollo client
export const apolloClient = new
ApolloClient({
link: httpLink,
cache: new InMemoryCache(),
connectToDevTools: true
})
const apolloProvider = new VueApollo({
defaultClient: apolloClient
})
// Install the vue plugin
Vue.use(VueApollo)
export default apolloProvider

Get your URL and x-hasura-admin-secret from
the GraphQL/API tab, as shown below.

Now it’s time to update your main.js file.
Import this apollo.js to the main.js.

// main.js
import Vue from 'vue'
import App from './App.vue'
import apolloProvider from './apollo'
Vue.config.productionTip = false
new Vue({
apolloProvider,
render: h => h(App)
}).$mount('#app')

So here we are, done with the initial setup.
Now, it’s time to make a query to get the data,
update it, and delete it.

Here I have created the users table. Create a
component for users, and let’s add the query
for getting the users data.

Use the following code snippets to
implement the CRUD operations in your
application.

CREATE

const name = this.name;
const email = this.email;
this.$apollo.mutate({
mutation: gql`
mutation addUser($name: String!, $email:
String!) {
insert_users(objects: [{ name: $name,
email: $email }]) {
returning {
user_id
}
}
}
`,
var

variables: {
name,
Email,
},
refetchQueries: ["getUsers"],
});
Same as we have inserted the data, we need to
update a particular user’s data and delete it too.

READ
apollo: {
userList: {
query: gql`
query getUsers {
users {
user_id
name
email

}
}
`,
update: (data) => {
return data.users;
},
},
},
In the userList variable, you will get an
object of users, so let’s add it into the table
element. Now, it’s time to add users, so
make one form and add two fields, name
and email.

UPDATE
const name = this.editUser.name;
const email = this.editUser.email;
const user_id = this.editUser.user_id;
mutation: gql`
mutation updateUsers($user_id: Int,
$name: String!, $email: String!) {
update_users(
where: { user_id: { _eq: $user_id } }
_set: { email: $email, name: $name }
) {
returning {
user_id
}
}

}
`,
variables: {
user_id,
name,
email,
},
});
DELETE
let user_id = id;
mutation: gql`
mutation deleteUser($user_id: Int) {
delete_users(where:

{ user_id: { _eq: $user_id } }) {
returning {
user_id
}
}
}
`,
variables: {
user_id,
},
});

Github Repository:
Build CRUD
Application using
VueJS, GraphQL,
and Hasura

Here’s the source code for building the
CRUD app with Vue, GraphQL, and Hasura
– vue-graphql-demo. Feel free to clone and
explore more about the codebase.

Now, you’re ready to build CRUD
application using VueJs, GaphQL, and
Hasura! Follow the entire step-by-step
guideline to create your app. Our team
extensively reviews and finds the best
relevant topics so that enthusiasts like you
can learn and explore every day! Visit the
VueJs tutorials page where you can find
similar topics with the github repository to
play around with the code. Feel free to
contact us for any suggestions or feedback.
We’ll be happy to hear from you.

Thank you
https://www.bacancytechnology.com/

How to build crud application using vue js, graphql, and hasura

Recommended

More Related Content

What's hot (20)

Similar to How to build crud application using vue js, graphql, and hasura (20)

More from Katy Slemon (20)

Recently uploaded (20)

How to build crud application using vue js, graphql, and hasura