GraphQL的应用

1. graph QL 基本概念

---

a. 什么是GraphQL？

官网定义如下：

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. It gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

大白话就是不同的Query Language 是查询数据库，而咱们这个QL是查询API。API的查询可以给客户端他们需要的数据，no more no less.

b.why we use it?

i.数据需求的差异

PC由于屏幕尺寸的差异，在界面显示的内容其实是有差异的。大屏幕，中型屏幕，小型屏幕，平板电脑，手机屏幕，在各个大小屏幕上，为了更好的体验，理论上显示的内容应该有所不同。

使用场景不同，需求就不同，呈现的产品应该不同。相配套的广告投送和消费习惯的变化，需要精确把控，提高转化率和客单价。

ii. 版本差异

比如说在7.16新加入一些功能，新的FETCH，而7.15就不需要某些fetch.

iii.需求差异

千人千面，当数据JS端进行聚合的时候，某些情况，某些人需要多个接口的聚合，而某些人又需要分开调用。

iv. 前端的MODEL层和服务端MODEL层结构差异

前端，或者渲染层为了方便显示，可能采取某种数据的结构或者说组织形式，而在服务层，是为了方便存储，方便分成多个表单存贮，所以组织形式可能存在差异。

2. GraphQL VS Restful API

---

a. RESTful

i. what is restful?

The core concept of REST is that everything is a resource. When HTTP is used, the most common operations available are GET, POST, PUT, and DELETE.

ii. limitation

• Multiple Round Trips To Fetch Related Resources
  Today’s web and mobile applications are often data-driven and require large sets of data combining related resources. Accessing those data by using a REST-based API often requires us to do multiple round-trips to collect everything what is needed.
• Over Fetching / Under Fetching
  每一个API只能返回特定的形式的RESPONSE， 但是如果我们仅仅需要某些部分，这个时候就会遇到一些问题
  e.g. By using endpoint mydomain.com/posts/:id we’re fetching data for a specific post. Each post might comprise the following properties: id, title, user, and body. If we only need id and title, the tradition restful API can do nothing here.

b. GraphQL

GraphQL is not dealing with dedicated resources. Instead everything is regarded as a graph and therefore is connected. You can tailor the request (query) to your exact needs by using the GraphQL.

{
     post(id: 1) {
        title
        user {
            name
            email
            courses {
                title
            }
        }
     }
}

经过重构SQL server, 前端也引入相应的库
post call变成如下

query PostsAndUser {
  post(id:1){
    id
    title
  }
}

"data": {
    "post": {
      "id": 1,
      "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit"
    }
  }

3. 前端演化进程

---

第一阶段： 前后端一体化

第二阶段： 前后端分离，中间出现简单的数据聚合层

第三阶段： 前后端分离，基于公司的人员组成，选择维护开发成本最低的架构

Restful 架构

GraphQL 架构

4.智能化展望

a. 智能化前端

• 千人千面
• 推荐系统

b. what happened when you log into your JD front page?

有意义的请求至少有如下几个

• https://blackhole.m.jd.com/getinfo
• https://ai.jd.com
• https://f.3.cn/index-floor-scene
• https://dy.jd.com
• https://passport.jd.com/loginservice.aspx
• https://misc.360buyimg.com/

总的来说

getInfo 记录所有信息

根据PID 个性化推荐

当季商品展示

当评判维度继续扩张的时候，就会出现大量冗余的信息，此时Graph QL就有用武之地了