{"id":34063,"date":"2023-03-08T04:30:36","date_gmt":"2023-03-08T04:30:36","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/blog\/?p=34063"},"modified":"2024-12-27T08:45:00","modified_gmt":"2024-12-27T08:45:00","slug":"apollo-vue-graphql","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/blog\/apollo-vue-graphql","title":{"rendered":"Getting Started With Apollo Vue GraphQL"},"content":{"rendered":"

This tutorial blog covers the Apollo Vue GraphQL step-by-step guide. Apollo Vue GraphQL is a robust integration of Vue flexibility and GraphQL’s data management. It empowers you to build a data-driven Vue app with enhanced data fetching, caching, and state management abilities. <\/strong><\/em><\/p>\n

Introduction<\/h2>\n

Vue Js is a modern javascript framework that is popular for building SPAs. To make the Vue developer experience convenient, Vue Apollo client and state management library functions, along with the server query language GraphQL, are used to bring about the formation of complex UIs.<\/p>\n

In this blog, we\u2019ve integrated the Vue Apollo framework with the Vue GraphQL server to facilitate smooth and efficient communication between the client and server.<\/p>\n

What is GraphQL?<\/h3>\n

In 2015, Facebook released GraphQL<\/a>, a query language for web APIs that eases the communication between frontend and backend. It consists of schema language for server and query language for the client. Being an open specification, anyone can use it with their version framework. It can be used with any choice of backend language to create a valid GraphQL server.<\/p>\n

Some of the popular frameworks used with GraphQL are Apollo, Hasura, GraphQL Yoga, and more. Perks of using GraphQL are that it makes the APIs fast, flexible, and developers find it easy to use.<\/p>\n

What is Apollo?<\/h3>\n

Apollo is the most preferred GraphQL framework as it provides both frontend and backend solutions. It provides good number of tools to convert the backend as GraphQL API, and hence interact with the frontend easily.<\/p>\n

Why the Need for Vue GraphQL?<\/h3>\n

GraphQL works for the server-side, and when the frontend wants to inquire or fetch data, the GraphQL client libraries offer solutions, and one such solution is Vue GraphQL. There are several such libraries for each frontend framework.<\/p>\n

\"Need

Need for Vue GraphQL<\/p><\/div>\n

Installation Process of Apollo Vue GraphQL<\/h2>\n

Let us begin with the process of connecting GraphQL API to the Vue Js frontend using the Apollo client framework.<\/p>\n

Step 1: Vue Apollo with GraphQL Server Creation<\/h3>\n

In the beginning create one project folder and inside that folder use below package.json file to create GraphQL server.<\/p>\n

Package.json<\/strong><\/p>\n

\"name\": '\"graphgl-server\",\r\n\"version\": \"1.0.0\",\r\n\"description\": \"\",\r\n\r\n\"author\": \"\",\r\n> Debug\r\n\r\n\"scripts\": {\r\n\"dev\": \"nodemon app.js\",\r\n\"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\r\n},\r\n\"main\": \"index.js\",\r\n\"dependencies\": {\r\n    \"cors\": \"~2.8.5\",\r\n    \"express\": \"~4.18.2\",\r\n    \"express\u2014-graphql\": \"70.12.00\",\r\n   \"nodemon\": \"2.0.20\"\r\n},\r\n\"keywords\": [],\r\n\"license\": \"ISC\"\r\n}\r\n<\/pre>\n
Step 2: Create App.js File<\/h3>\n
After that let\u2019s create an app.js file inside the same root folder. That app.js file is for creating schema for databases. So, you can create basic schema as per below example.<\/p>\n
App.js<\/strong><\/p>\n
const express = require(\"express\");\r\nconst cors = require(\"cors\");\r\nconst {\r\n    graphqlHTTP\r\n} = require(\"express-graphql\");\r\nconst {\r\n    GraphQLObjectType,\r\n    GraphQLInt,\r\n    GraphQLString,\r\n    GraphQLList,\r\n    GraphQLSchema,\r\n    GraphQLNonNull,\r\n} = require(\"graphql\");\r\nconst app = express();\r\n\r\napp.use(cors());\r\n\r\nlet userData = [{\r\n        id: 1,\r\n        firstName: \"John\",\r\n        lastName: \"Doe\",\r\n        age: 22\r\n    },\r\n    {\r\n        id: 2,\r\n        firstName: \"Mark\",\r\n        lastName: \"Smith\",\r\n        age: 30\r\n    },\r\n    {\r\n        id: 3,\r\n        firstName: \"Robert\",\r\n        lastName: \"Hunt\",\r\n        age: 35\r\n    },\r\n];\r\n\r\nconst userType = new GraphQLObjectType({\r\n    name: \"User\",\r\n    description: \"UserDetails\",\r\n    fields: {\r\n        id: {\r\n            type: GraphQLNonNull(GraphQLInt),\r\n        },\r\n        firstName: {\r\n            type: GraphQLNonNull(GraphQLString),\r\n        },\r\n        lastName: {\r\n            type: GraphQLNonNull(GraphQLString),\r\n        },\r\n        age: {\r\n            type: GraphQLNonNull(GraphQLInt),\r\n        },\r\n    },\r\n});\r\n\r\nconst rootQuery = new GraphQLObjectType({\r\n    name: \"RootQuery\",\r\n    description: \"This is root query\",\r\n    fields: {\r\n        users: {\r\n            type: GraphQLList(userType),\r\n            resolve: () => userData,\r\n        },\r\n\r\n        user: {\r\n            type: userType,\r\n            args: {\r\n                id: {\r\n                    type: GraphQLInt\r\n                },\r\n            },\r\n            resolve: (_, args) => userData.find((data) => data.id === args.id),\r\n        },\r\n    },\r\n});\r\n\r\nconst rootMutation = new GraphQLObjectType({\r\n    name: \"RootMutation\",\r\n    description: \"This is root mutation\",\r\n    fields: {\r\n        addUser: {\r\n            type: userType,\r\n            args: {\r\n                firstName: {\r\n                    type: GraphQLNonNull(GraphQLString)\r\n                },\r\n                lastName: {\r\n                    type: GraphQLNonNull(GraphQLString)\r\n                },\r\n                age: {\r\n                    type: GraphQLNonNull(GraphQLInt)\r\n                },\r\n            },\r\n            resolve: (_, args) => {\r\n                const newUser = {\r\n                    id: userData.length + 1,\r\n                    firstName: args.firstName,\r\n                    lastName: args.lastName,\r\n                    age: args.age,\r\n                };\r\n                userData.push(newUser);\r\n                return newUser;\r\n            },\r\n        }\r\n    },\r\n});\r\n\r\nconst schema = new GraphQLSchema({\r\n    query: rootQuery,\r\n    mutation: rootMutation\r\n});\r\n\r\napp.use(\r\n    \"\/graphql\",\r\n    graphqlHTTP({\r\n        schema,\r\n        graphiql: true,\r\n    })\r\n);\r\n\r\nconst PORT = 3001;\r\n\r\napp.listen(PORT, () => {\r\n    console.log(`Listening on port - ${PORT}`);\r\n});<\/pre>\n
After creating the app.js file now we need to execute npm install<\/strong> to install all required dependencies. Once installing all dependencies successfully we need to run the command npm run dev<\/strong> to run the GraphQL server. Once all this is done let\u2019s create a Vue app inside the same root folder.<\/p>\n
Ready to take your Vue.js development skills to the next level with Apollo Vue GraphQL?<\/span>
\nHire a skilled Vue developer<\/a> today and start building powerful, flexible APIs with ease. Contact us now to get started!<\/i><\/strong><\/p>\n
Step 3: Create Vue App<\/h3>\n
Here we used Vue 3 to create our app and make sure you need to use the node version below v17.<\/p>\n
\"Vue
Vue 3 to create our app<\/p><\/div>\n
\"Create
Create Vue App<\/p><\/div>\n
Now Navigate to our app and run it.<\/p>\n
\"Navigate
Navigate to our app<\/p><\/div>\n
After successfully running local server it will show like below:<\/p>\n
\"Vuejs
Vuejs app home<\/p><\/div>\n
Step 4: Apollo Client Full Configuration<\/h3>\n
Install these packages to integrate Apollo Vue GraphQL<\/i>.<\/p>\n
npm install --save @vue\/apollo-option\r\n\r\nnpm install --save @apollo\/client\r\n\r\nnpm install --save graphql\r\n\r\nnpm install --save graphql-tag<\/pre>\n
\"integrate
integrate Apollo Vue GraphQL<\/p><\/div>\n
Also install react to avoid errors that says need to install \u201creact\u201d.<\/p>\n
npm install react<\/pre>\n
\"install
install react to avoid errors<\/p><\/div>\n
Vue3 package.json file after above dependency installation.<\/p>\n
\"Vue3
Vue3 package.json file<\/p><\/div>\n
Step 5: Create Apollo Provider<\/h3>\n
After configuring the client, go to the vue app and create apollo.provider.js<\/strong> file inside src folder.<\/p>\n
apollo.provider.js:<\/strong><\/p>\n