GraphQL的了解和简单使用

本文链接： https://blog.csdn.net/weixin_44314258/article/details/87693655

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{
        id
        code
        specifications{
          values{
            id
            name
          }
        }
      }
    }
  }
}

代码解释

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){
    id
    url
  }
}

id.url为想要的返回字段

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

4 . 总结

推荐文档 :

graphql API

vue+apollo+grapql

推荐工具

GraphiQl下载地址