GraphQL-前端开发的利剑与桥梁

时间 2019-11-17

标签 graphql 前端开发利剑桥梁繁體版

原文原文链接

基本概念

GraphQL

GraphQL 是一种用于 API 的查询语言，由Facebook开发和开源，是使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。GraphQL并无和任何特定数据库或者存储引擎绑定，而是依靠你现有的代码和数据支撑。前端

背景介绍

相信看了上面的基本概念，你们都是和我同样一脸萌萌哒。因此这里就须要介绍一下其产生的背景和缘由。vue

在咱们目前的先后端开发过程当中，大部分都是以http请求服务端接口的方式完成交互过程的。在这种场景下，每当需求变化，就须要修改或建立一个新的接口去知足特定的需求。sql

举个栗子：在一个商品详情页，当咱们须要获取商品详情时，服务端会给前端一个接口，例如：数据库

https://www.example.com/getInfoById?infoId=000000npm

当前端请求接口时，会返回给一个固定格式的数据，例如：后端

｛
    data:{
        title:'商品的标题',
        content:'商品的描述内容',
        special:'商品特色',
        price:'商品价格',
        image:'商品的图片'
    }
｝
复制代码

前端接收到数据后，进行各类相应的处理展现，最终将包含有商品标题，商品描述，商品特色，商品价格，商品图片信息的页面展现给用户。api

一切看起来都很美好，直到有一天……跨域

产品大摇大摆的走过来，轻描淡写的说道：“能不能把商品的特色去掉，加一个商品的库存，另外还须要再加一个卖家的模块进去。包含卖家的名称和头像，能够点进卖家的详情页，也不用太着急，午餐前上线就行。”数组

因而先后端坐在一块儿开始商量，前端弱弱的说：“能不能改一下你的接口，把产品不要的都去掉，产品须要的都加上”。浏览器

后端内心说，你当我傻啊，因而一边砸吧嘴一边赶紧说道：“这样改风险太大，好多数据都不在一个表，我很差查。这样，详情页那个接口我就不改了，你不显示不就完了嘛，万一哪天产品那小子的小子再想起来加上，咱俩还得忙活。库存再给你一个接口，卖家信息再给你一个接口，完美，就这么定了。”

前端还想再说什么，可后端的背影已经随着产品越走越远。

就在前端绝望之时，霹雳一声震天响，graphql闪亮登场。

在graphql模式下，假设咱们的服务端部分已经部署完成，前端使用vue框架，那么前端部分的请求就能够简化为：

apollo: {
    goods: {
      query() {
        return gql`{
            goods(infoId:"${this.infoId}"){
              title
              content
              price
              image
          }
        }`
      }
    },
    store: {
      query() {
        return gql`{
            store(infoId:"${this.infoId}"){
              store
          }
        }`
      }
    },
    seller: {
      query() {
        return gql`{
            seller(infoId:"${this.infoId}"){
              name
              age
          }
        }`
      }
    }
  }

复制代码

能够看到graphql为咱们定义了一种相似sql的查询语言，而这种查询语言是用于api的。和以前的数据请求处理不一样，在这里，咱们只要定义好须要的数据，其余的再也不关心，咱们就能够按需索取须要的数据。这对于咱们的开发提供了更大的自由与便利，只要数据支持，咱们就能够摆脱对于服务端接口的依赖，提升生产效率，赢得自由，完成前端的逆袭。

先后端实践

讲完了故事，咱们开始讲一些实际的干货。对于graphql，网上已经有不少实践经验，如下部分是在参考完成实践经验并自我实践后给出的总结概括。

服务端

服务端的技术选型，咱们使用了eggjs框架，配合egg-graphqlegg-graphql插件完成。

1.安装依赖包

$ npm install --save egg-graphql
复制代码

2.开启插件

// config/plugin.js
exports.graphql = {
  enable: true,
  package: 'egg-graphql',
}; 
//开启 cros 跨域访问
exports.cors = { 
    enable: true, 
    package: 'egg-cors'
}
复制代码

3.配置graphql路由和跨域

//config/config.default.js
// graphql路由
config.graphql = {
router: '/graphql',
// 是否加载到 app 上，默认开启
app: true,
// 是否加载到 agent 上，默认关闭
agent: false,
// 是否加载开发者工具 graphiql, 默认开启。路由同 router 字段。使用浏览器打开该可见。
graphiql: true,
// graphQL 路由前的拦截器
onPreGraphQL: function*(ctx) {},
// 开发工具 graphiQL 路由前的拦截器，建议用于作权限操做(如只提供开发者使用)
onPreGraphiQL: function*(ctx) {},
}
// cors跨域
config.cors = {    
    origin: '*',    
    allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH,OPTIONS'
}
复制代码

4.开启graphql中间件

//config/config.default.js
exports.middleware = [ 'graphql' ];
复制代码

项目配置告于段落。

5.编写业务员代码

下面开始写代码。目录结构以下：

├── app
│   ├── graphql                          //graphql 代码，全部和graphql相关的代码都在这里，已经在前面作好了配置
│   │    └── common                   //通用类型定义，graphql有一套本身的系统类型，除此以外还能够自定义
│   │     |    |── scalars                 //自定义类型定义
│   │     |    |  └──  date.js            // 日期类型实现
│   │     |   └── resolver.js            //合并全部全局类型定义
│   │     |   └── schema.graphql     // schema 定义
│   │    └──goods                       // 商品详情的graphql模型
│   │         └── connector.js         //链接数据服务
│   │         └── resolver.js            //类型实现，和goods中schema.graphql定义的模型相对应，是其具体的实现
│   │         └── schema.graphql    //schema 定义，在这里定义商品详情数据对象
│   │    └──store                        // 库存的graphql模型
│   │         └── connector.js         //链接数据服务
│   │         └── resolver.js            //类型实现
│   │         └── schema.graphql    //schema 定义，在这里定义商品详情数据对象
│   │    └──seller                       // 卖家信息的graphql模型
│   │         └── connector.js         //链接数据服务
│   │         └── resolver.js            //类型实现
│   │         └── schema.graphql    //schema 定义，在这里定义商品详情数据对象
│   │    └──query                       // 全部的查询都会通过这里，这里是一个总的入口
│   │         └── schema.graphql    //schema 定义
│   ├── service
│   │   └── goods.js                    //商品详情的具体实现
│   │   └── store.js                     //库存的具体业务逻辑
│   │   └── seller.js                     //卖家信息的具体业务逻辑
│   └── router.js
复制代码

app/graphql/query/schema.graphql是整个graphql查询的总入口，全部须要查询的对象都要在这里定义。它的定义形式以下：

#定义查询对象，在graphql里的注释使用#号
type Query {
goods(
  #查询条件，至关于接口的入参商品id
  infoId: ID!
):Goods #Goods是在app/graphql/goods/schema.graphql中定义的商品详情
}
复制代码

在总入口中涉及到的查询对象，都须要在graphql文件夹下创建相应的文件夹，如上文中提到的goods，就在app/graphql文件夹中存在相应的goods文件夹。goods文件夹包含三个部分：schema.graphql，resolve.js和connector.js。 schema.graphql中须要定义总入口中说起的Goods对象：

# 商品
type Goods {
    # 流水号
    infoId: ID!
    # 商品标题
    title:String!,
    # 商品内容
    content:'String!, #商品特色 special:'String!,
    #商品价格
    price:'nt!, #商品图片 image:'String!,
}
复制代码

graphql自带一组默认标量类型，包括Int，Float，String，Boolean，ID。在定义字段时须要注明类型，这也是graphql的特色之一，是支持强类型的。若是非空，就在类型后面跟上一个!号。graphql还包括枚举类型，列表和自定义类型，具体能够查看相关文档。

resolve.js是数据类型的具体实现，依赖connector.js完成：

'use strict'
module.exports = {
  Query: {
        goods(root, {infoId}, ctx) {
        return ctx.connector.goods.fetchById(infoId)
  }
}
复制代码

connector.js是链接数据的具体实现，可使用dataloader来下降数据访问频次，提升性能：

'use strict'
//引入dataloader，是由facebook推出，能大幅下降数据库的访问频次，常常在Graphql场景中使用
const DataLoader = require('dataloader')
class GoodsConnector {
    constructor(ctx) {  
        this.ctx = ctx  
        this.loader = new DataLoader(id=>this.fetch(id))
    }
    fetch(id) {  
        const goods = this.ctx.service.goods  
        return new Promise(function(resolve, reject) {    
            const goodsInfo = goods.getInfoById(id)    
            resolve([goodsInfo])  //注意这里须要返回数组形式
        })
    }
    fetchById(id) {  
        return this.loader.load(id)
    }
}
module.exports = GoodsConnector
复制代码

上面代码中涉及的this.ctx.service.goods就是app/service文件夹下的goods.js文件导出的方法对象，也就是获取数据的具体业务逻辑：

const Service = require('egg').Service
const {createAPI} = require('../util/request')//实现的http请求
class GoodsService extends Service {
// 获取商品详情
    async getInfoById(infoId) {
        const result = await createAPI(this, 'example/getInfoById', 'get', {infoId})
        return result
    }
}
module.exports = GoodsService

复制代码

获取数据能够用你能实现的任何方式，能够直接从数据库获取，也能够用http从现有的接口获取。这样一个使用egg框架实现的graphql服务就完成了。下面说一下前端。

前端

咱们会使用vue配合Apollo完成前端搭建。

1 安装依赖包

npm install --save vue-apollo apollo-client
复制代码

2.引用apollo

import 'isomorphic-unfetch'//黑板敲重点，apollo-client中直接使用了fetch，引入兼容低版本浏览器
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import VueApollo from 'vue-apollo'

复制代码

3.配置连接

const httpLink = new HttpLink({
  // 须要配置一个绝对路径
  uri: 'http://exzample.com/graphql',
})
复制代码

4.建立ApolloClient实例和PROVIDER

// Create the apollo client
const apolloClient = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
  connectToDevTools: true,
})
const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
})
复制代码

4.在vue中引入使用

Vue.use(VueApollo);
复制代码

5.根实例引用

var vm = new Vue({
      el: '#app',
      provide: apolloProvider.provide(),
      router,
      components: {
        app: App
      },
      render: createEle => createEle('app')
    })
复制代码

6.使用

<script>
import gql from "graphql-tag"; 
export default { 
    data() { 
        return {
            goods:｛｝,
            infoId:123123
        }; 
    }, 
    apollo: { 
        goods: {
            query() {
                return gql`{
                    goods(infoId:"${this.infoId}"){
                        title
                        content
                        price
                        image
                    }
                }`
            }
        },
     }
 }; 
 </script>
复制代码

展望

graphql对于目前接口数量多，难维护，扩展成本高，数据格式不可预知，文档难维护等问题给出了一个相对完善的方案，相信在将来，它将是咱们工做中不可或缺的一部分。