GraphQL的了解和简单使用

1 . GraphQL介绍

graphql 是 Facebook开源的一种API查询语言,它的强大之处用官方一句话来说就是:

ask exactly what you want.    问你到底想要什么

2 . 为什么要用GraphQL

例如我们日常开发中写一个app或一个小程序,我这个页面要用到一个商品的name,商品的description,商品code,另一个页面我要用到商品code,商品的img,商品的sku,这时后台数据为了一次性写好,会把所有关于商品的数据写到一个api里,这样我们调接口的时候会看到里面数据一层又一层的嵌套,明明只要一条数据,却要请求一大堆不用的东西,导致页面加载越来越慢,体验越来越差,这个时候GraphQL就登场了。

3 . 看懂基础的GraphQL语法

列如后台返回shop里的spu里的sku例子

前面是字段,后面是字段类型,同理请求是入参也是这样,[]代表返回时个数组,对象同理,!表示非空

前端查(调接口)

要用到GraphQL的query查询
product.gql文件写法如下

query ProductDetail($spuId:Long){shop{spu(id:$spuId){skus{idcodespecifications{values{idname}}}}}
}

代码解释

ProductDetail 为方法名

spuId 为参数

返回值如下

{"data": {"shop": {"spu": {"skus": [{"id": 458116,"code": "111","specifications": [{"values": [{"id": 177698,"name": "黑色"}]}]}]}}},"errors": [],"dataPresent": true,"extensions": null
}

不要觉得嵌套的深,数据比较多而已,例如上面所写,这时你想要什么字段就拿什么字段,

假如我只要id和code

可使用GraphiQl工具调试

这样就可以做到为所欲为,想要的都能拿到,不想要的一个都不要,是不是很好用

前端改

增删改要用到GraphQL的mutation变更

例如图片库的增删改

后台api如下

创建图片的入参

删除图片的入参

gql文件写法

#创建图片
mutation createSkuImage($input:SkuImageCreateInput!){createSkuImage(input:$input){idurl}
}

id.url为想要的返回字段

#删除图片
mutation deleteSkuImage($input:SkuImageDeleteInput!){deleteSkuImage(input: $input)
}

4 . 总结

推荐文档 :

graphql API

vue+apollo+grapql

推荐工具

GraphiQl下载地址