vue中graphql的配置

简单理解

最近在接触graphql一种查询语句，个人觉得和axios的get和post请求差不多，但是graphql有点在于它可以用一个接口把请求所需要的数据全部拿来，就相当于一个中间商，你只需要和中间商这一条线通话，他会帮你那你所需要的数据，不用向之前那样我可能只拿一个用户名字，结果后端返回全部信息（包括身高体重之类的，这样就会显得很冗余）

环境配置

这里在前端和graphql之间使用的是vue-apollo工具，通过官方的文档先vue add apollo下载所使用的包，添加完成后插件会询问我们是否添加示例代码，是否添加 GraphQL 服务，是否配置 Apollo 引擎，我们这里不太需要这些，直接一路选 N 就可以了,在vue-apollo.js文件中配置你的graphql接口

在main.js中引入vue-apollo文件


修改根目录下的apollo.config.js用于配置 VScode 的Apollo GraphQL插件,获取服务器 的 GraphQL 类型定义；需要 VScode 提前安装Apollo GraphQL插件

一般在拿到接口是都会携带token，在拦截器里把要携带的token携带上

简单调用

一般在src的api中新建graphql文件，在graphql里写上各种gql结尾的语句
在src/graphql下创建addOneGoods.gql，用于新增商品:
mutation addOneGoods($goods: GoodsInsertTypeGraphql!) {
addOneGoods(goods: $goods) {
id
name
price
count
remark
}
}

在页面中调用一般通过this.apollo来访问
引入addOneGoods.gql，使用this.$apollo.mutate调用此 Mutations，新增商品信息：
import ADD_ONE_GOODS from ‘@/graphql/addOneGoods.gql’

// 新增一个商品
handleAddOneGoods(goods: IGoods) {
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …{ this.message.success(‘修改商品信息成功’)
})
.catch(e => {
this.$notify.error(请求错误: ${e.message})
})
}
IGoods是商品的类型定义：
export interface IGoods {
id?: string
name: string
price: number
count: number
remark: string
}

由于 vue-apollo 库默认使用了接口缓存，所以短时间内重复的 query 请求不会去获取最新数据，所以在实际使用this.$apollo.mutate方法的时候都会写update回调
，用于更新对应 query 的缓存数据