在vue项目中集成graphql(vue-ApolloClient)

本文介绍了如何在Vue项目中集成GraphQL,通过使用vue-ApolloClient实现前后端交互。首先,解释了GraphQL的基本概念和优势,如强类型schema和按需获取数据。接着,详细步骤包括安装vue脚手架和相关依赖,配置webpack加载器,以及在Vue组件中导入和使用graphql查询。最后,讨论了可能遇到的npm版本问题及其解决方案。
摘要由CSDN通过智能技术生成

1.什么是graphql

GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时

下图展示graphql所处的位置


2.优点

1.GraphQL API 有强类型 schema

GraphQL schema是强类型的,可使用SDL(GraphQL Schema Definition Language)来定义。比如,可以使用构建工具验证API请求,编译时检查API调用可能发生的错误

2.按需获取

在不添加后端接口的前提下减少不必要的字段,做到前端自主订阅字段

3.使用 vue集成graphql

1.安装vue脚手架 npm install -g vue-cli

2.安装vue-apollo客户端 vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag

3.webpack.base.conf.js 安装加载器加载graphql后缀文件

{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
loader: 'graphql-tag/loader'
},

4.main.js 添加

`import { ApolloClient } from` `&
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值