This article will teach you how to create a CRUD application with VueJS, GraphQL, and Hasura. Don’t be afraid of the technological stack; if you stick to the end, you’ll be able to construct your first CRUD VueJS app, CRUD GraphQL app, and Hasura app.
Many developers mistake GraphQL for a database technology, however this is not the case!
GraphQL is a query language that may be used to create REST APIs. GraphQL provides an interface for storing information that suits the needs of the application.
It was created by Facebook as an internal technology to improve the app’s adaptability and was subsequently made open-source. Since then, it has become one of the most popular technology stacks for producing online services in the software development world.
Prerequisites
- Basic knowledge of VueJS and GraphQL
- VS Code or any other IDE
- Familiarity with Javascript and HTML
Database Set-Up using Hasura
To begin, you must register with Hasura cloud. Visit do the same, go to hasura.io.
With GraphQL, Hasura quickly allows your apps to query, update, and get real-time notifications about your data. You must link your database after successfully signing up. You may use any existing database or build one from Heroku for free.
Let’s move on to the coding part once you’ve finished generating or connecting your database.
Initial Set-Up and Installation
You may either create a new VueJS application or use an existing one.
I’m using a new vue application that I created with vue-cli. So, here’s the command for making the application.
vue create vue-graphql-demo
To install all the dependencies run the below given command.
npm install vue-apollo@3.0.0-beta.28 apollo-cache-inmemory apollo-link-http apollo-client graphql-tag graphql –save
under the src/, create one file named apollo.js and register all the packages.
// 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
As illustrated below, get your URL and x-hasura-admin-secret from the GraphQL/API tab.
It’s now time to make changes to your main.js file. Import apollo.js into 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, we’ve completed the first setup. It’s now time to run a query to retrieve the data, update it, and remove it.
The users table has been generated here. Make a user component, and then add the query to obtain the users’ data.
Implement CRUD Operation
To implement CRUD operations in your application, use the code snippets below.
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
}
}
}
`,
variables: {
name,
Email,
},
refetchQueries: [“getUsers”],
});
We need to update and remove a specific user’s data in the same way as we put it.
READ
apollo: {
userList: {
query: gql`
query getUsers {
users {
user_id
name
}
}
`,
update: (data) => {
return data.users;
},
},
},
You’ll obtain an object of users from the userList variable, so let’s put it in the table element. It’s now time to add users, so create one form with two fields, name and email.
UPDATE
const name = this.editUser.name;
const email = this.editUser.email;
const user_id = this.editUser.user_id;
this.$apollo.mutate({
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,
},
refetchQueries: [“getUsers”],
});
DELETE
let user_id = id;
this.$apollo.mutate({
mutation: gql`
mutation deleteUser($user_id: Int) {
delete_users(where: { user_id: { _eq: $user_id } }) {
returning {
user_id
}
}
}
`,
variables: {
user_id,
},
refetchQueries: [“getUsers”],
});
Conclusion
You are now ready to create a CRUD application with VueJs, GaphQL, and Hasura! To develop your app, follow the whole step-by-step tutorial. Our staff thoroughly examines and selects the finest relevant subjects so that enthusiasts like you may learn and explore on a daily basis! Visit the VueJs tutorials page to see comparable subjects and the GitHub repository to experiment with the code. Please email us if you have any suggestions or criticism. We’d love to hear from you.
