{"id":23286,"date":"2022-01-25T12:48:03","date_gmt":"2022-01-25T12:48:03","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/blog\/?p=23286"},"modified":"2026-05-12T06:45:47","modified_gmt":"2026-05-12T06:45:47","slug":"crud-application-using-vuejs-graphql","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/blog\/crud-application-using-vuejs-graphql","title":{"rendered":"How to Build CRUD Application using VueJS, GraphQL, and Hasura"},"content":{"rendered":"<h2>Introduction<\/h2>\n<p>In this tutorial, we will learn how to build <b>CRUD application using VueJS, GraphQL<\/b>, and Hasura. Don\u2019t be scared of the technical stack; just stick till the end of the blog, and you\u2019ll be able to build your basic CRUD VueJS app, CRUD GraphQL app, and Hasura app. <\/p>\n<p>Many developers consider GraphQL as a DB technology, but that\u2019s not true!<\/p>\n<p>GraphQL is a query language &#8211; an alternative to build REST APIs. GraphQL provides an interface to put-away information that meets the application&#8217;s requirements.<\/p>\n<p>Facebook developed it as an internal technology for enhancing the app\u2019s 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.<\/p>\n<h2>Tutorial Goal: Build CRUD Application using VueJS, GraphQL, and Hasura<\/h2>\n<p>Before moving towards building a basic CRUD app, watch the below video to understand what we are building.<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/GvA7N1uB86g\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<h2>Prerequisites<\/h2>\n<ul class=\"bullets\">\n<li>Basic knowledge of VueJS and GraphQL<\/li>\n<li>VS Code or any other IDE<\/li>\n<li>Familiarity with Javascript and HTML<\/li>\n<\/ul>\n<h2>Database Set-Up using Hasura<\/h2>\n<p>Firstly you need to sign up to Hasura cloud. Visit <a href=\"https:\/\/cloud.hasura.io\" target=\"_blank\" rel=\"noopener\">hasura.io<\/a> to do the same.<\/p>\n<p>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&#8217;s for free.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/01\/Database-Set-Up-using-Hasura-min.png\" alt=\"Database Set-Up using Hasura\" width=\"1600\" height=\"649\" class=\"aligncenter size-full wp-image-25211\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/01\/Database-Set-Up-using-Hasura-min.png 1600w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/01\/Database-Set-Up-using-Hasura-min-300x122.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/01\/Database-Set-Up-using-Hasura-min-1024x415.png 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/01\/Database-Set-Up-using-Hasura-min-768x312.png 768w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/01\/Database-Set-Up-using-Hasura-min-1536x623.png 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p class=\"boxed bg--secondary\" style=\"border: 1px solid #c7c7c7; box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);\"><strong><em><span style=\"font-size:22px; color:#000;\">Not Sure Where to Start, then You are at the Right place.<\/span><br \/>\nIf you\u2019re unsure of where to start, then you can <a href=\"https:\/\/www.bacancytechnology.com\/hire-vuejs-developer\" target=\"_blank\" rel=\"noopener\">Hire VueJS developer<\/a> from us, who are very confident and enthusiastic to complete your project.<\/em><\/strong><\/p>\n<h2>Initial Set-Up and Installation<\/h2>\n<p>You can create a new VueJS application or use an existing application.<\/p>\n<p>Here I am using a fresh vue application by setting up using vue-cli. So here is the command to create the application.<\/p>\n<pre>vue create vue-graphql-demo<\/pre>\n<p>Run the below command to install all the dependencies.<\/p>\n<pre>npm install vue-apollo@3.0.0-beta.28 apollo-cache-inmemory apollo-link-http apollo-client graphql-tag graphql --save<\/pre>\n<p>Then create one file named apollo.js under the src\/ and register all the packages below.<\/p>\n<h3>\/\/ apollo.js<\/h3>\n<pre>import Vue from 'vue'\r\nimport VueApollo from 'vue-apollo'\r\nimport { ApolloClient } from 'apollo-client'\r\nimport { HttpLink } from 'apollo-link-http'\r\nimport { InMemoryCache } from 'apollo-cache-inmemory'\r\n \r\nconst httpLink = new HttpLink({\r\n    \/\/ You should use an absolute URL here\r\n    uri: 'https:\/\/your-app.hasura.app\/v1\/graphql',\r\n    headers: {\r\n      \"x-hasura-admin-secret\": \"token\"\r\n    }\r\n})\r\n \r\n\/\/ Create the apollo client\r\nexport const apolloClient = new ApolloClient({\r\n    link: httpLink,\r\n    cache: new InMemoryCache(),\r\n    connectToDevTools: true\r\n})\r\n \r\nconst apolloProvider = new VueApollo({\r\n    defaultClient: apolloClient\r\n})\r\n \r\n\/\/ Install the vue plugin\r\nVue.use(VueApollo)\r\n \r\nexport default apolloProvider<\/pre>\n<p>Get your URL and <strong>x-hasura-admin-secret<\/strong> from the GraphQL\/API tab, as shown below.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/01\/Get-your-URL-and-x-hasura-admin-secret-min.png\" alt=\"Get your URL and x-hasura-admin-secret\" width=\"1600\" height=\"451\" class=\"aligncenter size-full wp-image-25213\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/01\/Get-your-URL-and-x-hasura-admin-secret-min.png 1600w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/01\/Get-your-URL-and-x-hasura-admin-secret-min-300x85.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/01\/Get-your-URL-and-x-hasura-admin-secret-min-1024x289.png 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/01\/Get-your-URL-and-x-hasura-admin-secret-min-768x216.png 768w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/01\/Get-your-URL-and-x-hasura-admin-secret-min-1536x433.png 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p>Now it\u2019s time to update your <strong>main.js<\/strong> file. Import this <em>apollo.js<\/em> to the <em>main.js<\/em>.<\/p>\n<h3>\/\/ main.js<\/h3>\n<pre>import Vue from 'vue'\r\nimport App from '.\/App.vue'\r\nimport apolloProvider from '.\/apollo'\r\n \r\nVue.config.productionTip = false\r\nnew Vue({\r\n apolloProvider,\r\n render: h => h(App)\r\n}).$mount('#app')\r\n<\/pre>\n<p>So here we are, done with the initial setup. Now, it\u2019s time to make a query to get the data, update it, and delete it.<\/p>\n<p>Here I have created the users table. Create a component for users, and let\u2019s add the query for getting the users data.<\/p>\n<h2>Implement CRUD Operation<\/h2>\n<p>Use the following code snippets to implement the CRUD operations in your application.<\/p>\n<h3><u>CREATE<\/u><\/h3>\n<pre>const name = this.name;\r\nconst email = this.email;\r\nthis.$apollo.mutate({\r\nmutation: gql`\r\nmutation addUser($name: String!, $email: String!) {\r\n        insert_users(objects: [{ name: $name, email: $email }]) {\r\n             returning {\r\n               user_id\r\n             }\r\n         }\r\n       }\r\n`,\r\nvariables: {\r\n   name,\r\n   Email,\r\n},\r\nrefetchQueries: [\"getUsers\"],\r\n});<\/pre>\n<p>Same as we have inserted the data, we need to update a particular user\u2019s data and delete it too.<\/p>\n<h3><u>READ<\/u><\/h3>\n<pre>apollo: {\r\n   userList: {\r\n     query: gql`\r\n       query getUsers {\r\n         users {\r\n           user_id\r\n           name\r\n           email\r\n         }\r\n       }\r\n     `,\r\n     update: (data) => {\r\n       return data.users;\r\n     },\r\n   },\r\n },<\/pre>\n<p>In the userList variable, you will get an object of users, so let\u2019s add it into the table element. Now, it\u2019s time to add users, so make one form and add two fields, name and email.<\/p>\n<h3><u>UPDATE<\/u><\/h3>\n<pre>const name = this.editUser.name;\r\nconst email = this.editUser.email;\r\nconst user_id = this.editUser.user_id;\r\nthis.$apollo.mutate({\r\n   mutation: gql`\r\n    mutation updateUsers($user_id: Int, $name: String!, $email: String!) {\r\n      update_users(\r\n        where: { user_id: { _eq: $user_id } }\r\n          _set: { email: $email, name: $name }\r\n        ) {\r\n           returning {\r\n           user_id\r\n          }\r\n        }\t\r\n      }\r\n    `,\r\n      variables: {\r\n        user_id,\r\n        name,\r\n        email,\r\n     },\r\n      refetchQueries: [\"getUsers\"],\r\n   });\r\n<\/pre>\n<h3><u>DELETE<\/u><\/h3>\n<pre>let user_id = id;\r\n   this.$apollo.mutate({\r\n     mutation: gql`\r\n       mutation deleteUser($user_id: Int) {\r\n        delete_users(where: { user_id: { _eq: $user_id } }) {\r\n           returning {\r\n             user_id\r\n           }\r\n         }\r\n       }\r\n      `,\r\n     variables: {\r\n        user_id,\r\n     },\r\n     refetchQueries: [\"getUsers\"],\r\n  });\r\n<\/pre>\n<h2>Github Repository:  Build CRUD Application Development using VueJS, GraphQL, and Hasura<\/h2>\n<p>Here\u2019s the source code for building the CRUD Vue js app, GraphQL CRUD, and Hasura &#8211; <a href=\"https:\/\/github.com\/Dharati-Mirani\/vue-graphql-demo\" target=\"_blank\" rel=\"noopener\">vue-graphql-demo<\/a>. Feel free to clone and explore more about the codebase.<\/p>\n<h2>Conclusion<\/h2>\n<p>Now, you\u2019re 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 <a href=\"https:\/\/www.bacancytechnology.com\/tutorials\/vuejs\" target=\"_blank\" rel=\"noopener\">VueJs tutorials<\/a> 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\u2019ll be happy to hear from you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction In this tutorial, we will learn how to build CRUD application using VueJS, GraphQL, and Hasura. Don\u2019t be scared of the technical stack; just stick till the end of the blog, and you\u2019ll be able to build your basic CRUD VueJS app, CRUD GraphQL app, and Hasura app. Many developers consider GraphQL as a [&hellip;]<\/p>\n","protected":false},"author":85,"featured_media":23298,"comment_status":"open","ping_status":"open","sticky":false,"template":"blog-new-template.php","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[1244],"tags":[],"coauthors":[1842],"class_list":["post-23286","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vuejs"],"acf":[],"modified_by":"Pavan Bachani","_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/23286","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=23286"}],"version-history":[{"count":2,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/23286\/revisions"}],"predecessor-version":[{"id":58959,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/23286\/revisions\/58959"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media\/23298"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=23286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=23286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=23286"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/coauthors?post=23286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}