How to Build CRUD Application using VueJS, GraphQL, and Hasura https://www.bacancytechnology.com/
Introduction
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.
Below is the Video link https://youtu.be/GvA7N1uB86g
Prerequisites Basic knowledge of VueJS and GraphQL VS Code or any other IDE Familiarity with Javascript and HTML
Prerequisites
Basic knowledge of VueJS and GraphQL VS Code or any other IDE Familiarity with Javascript and HTML
Database Set-Up using Hasura
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-linkhttp 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-cacheinmemory' const httpLink = new HttpLink({ // You should use an absolute URL here uri: 'https://yourapp.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.
Implement CRUD Operation
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; 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"], });
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.
Conclusion
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/