GraphQL:你的容颜,十万光年
What?
GraphQL 是一种类似于 SQL 的结构化查询语言,由 facebook 于2012年创造,于2015年开源。SQL 在服务端定义,GraphQL 在客户端定义,也就是说 GraphQL 将数据的操作控制权从后端转移到了前端。
facebook 创造 GraphQL 的目的是取代以前用的 Restful API,这个方案之漂亮,连 jQuery 之父也忍不住啧啧称叹:

Why?
传统的 Restful API 存在的主要问题是无法灵活、精准的匹配前端的数据需求。
首先,产品的需求经常变,于是前端需要的接口也经常变,比如遇到版本迭代,即便整个数据库结构没有任何变化,常常也需要重写或新增很多接口。其次,前端存在不同的平台,可能对同一类数据的请求,web 端和 app 端需要的字段是不一样的。
后端的接口要做到与前端的需求一一匹配,会极大的增加后端的工作量,于是后端可能会采取这样的方式:“为多个请求提供一个接口并集,而不是分别为每个请求单独提供接口”,“有现成可用,就尽量不新增接口”,比如前端需要两个接口 {1, 2}、{1, 3, 4},后端只需提供一个接口 {1, 2, 3, 4}。
于是前端对数据的需求和后端提供的接口常常无法精准匹配。前端总会遇到这样的情况:请求的接口常常返回很多冗余数据;为了拿到一组数据,不得不发送多个请求;请求到的数据不符合需要的格式,不得不做额外处理;有时某个接口就只少了一个字段……
一方面冗余的数据和多次的请求必然会影响产品体验,另一方面围绕 Restful API 建立的前后端协作模式会导致大量沟通成本,需要约定、需要接口文档、甚至还需要“联调”。
解决问题的办法可以是“深入推进前后端技术融合、全面加强前后端协作沟通、狠抓落实文档规范……”,这些都是办法,但对于 facebook 这种体量的产品,靠人力解决上述问题的成本可能是我们无法想象的,而且这也不像是技术人员解决问题的方式,至少 facebook 的工程师不这么想。
近年来 web 开发的基本趋势是从后向前移,越来越多的逻辑在前端处理,但是接口仍然需要后端提供,前端总是要等后端喂接口,后端写的接口总是要等前端来验证,那么为什么 SQL 不能让前端来写呢?这就是 GraphQL 提出的解决方案:由前端来定义所需数据、发送查询命令,服务器根据请求自动查询数据库并按指定的数据结构返回数据,用啥取啥,后端只提供服务,而不再关心具体的业务。
自动化实现,应该永远是每个程序员解决问题的第一思路。
How?

前端向服务端发送的 GraphQL 就是一串字符串,它的结构和 json 类似,其中包含增、删、改、查的指令,括号中定义了一些参数。服务端收到请求就会根据指定的指令、字段和参数返回所需的结构化数据。简单的说,就是前端发送只有属性名,而没有值的 json,服务端返回填充了值的 json。

具体的教程网上已有不少,在此不做深究。本文目的重在对技术的理解,而非对技术的使用。
Pros?
1、网络层数据无冗余。特别是在移动端,冗余数据可能带来不小的延迟;
2、前后端沟通成本低。根本用不着联调,后端也用不着写什么接口文档;
3、灵活应对各种变化。前端取数据跟吃自助餐似的,私人订制,予取予求;
Cons?
既然这么牛,怎么似乎没啥人用呢?
以下参考尤雨溪的回答:https://www.zhihu.com/question/38596306?sort=created
1、服务端结构必须符合 GraphQL spec 的规范,这意味着后端需要重写;
2、GraphQL 非常适合特定的前端框架如 React,对于不使用前端框架的公司,就比较尴尬了;
3、数据库查询这一层的性能优化比较难做,对于 facebook 这不是问题,对于其它公司可能就是个问题;
4、GraphQL 需要后端配合,然而由于路径依赖、风险厌恶等可能的因素,前端要推动 GraphQL 必然会遇到各种阻力。

GraphQL:你的容颜,十万光年的更多相关文章
- 哈勃(Hubble)望远镜的新发现
请看下图: itok=FcRLe7t_" name="图形1" alt="" border="0" height ...
- FPGA设计中遇到的奇葩问题之“芯片也要看出身”
FPGA设计中遇到的奇葩问题之“芯片也要看出身”(一) 昨夜西风凋碧树.独上高楼,望尽天涯路 2000年的时候,做设计基本都是使用Xilinx公司的Virtex和Virtex-E系列芯片.那时候Alt ...
- Facebook的Web开发三板斧:React.js、Relay和GraphQL
2015-02-26 孙镜涛 InfoQ Eric Florenzano最近在自己的博客上发表了一篇题为<Facebook教我们如何构建网站>的文章,他认为软件开发有些时候需要比较大的跨 ...
- LinkedIn的即时消息:在一台机器上支持几十万条长连接
最近我们介绍了LinkedIn的即时通信,最后提到了分型指标和读回复.为了实现这些功能,我们需要有办法通过长连接来把数据从服务器端推送到手机或网页客户端,而不是许多当代应用所采取的标准的请求-响应模式 ...
- facebook graphql
思想先进,前端直接从后台调用所需要的数据. 最简单的理解: 从"select * from 学生表" 进化为"select name, sex from 学生表" ...
- Graphql介绍(Introduction to GraphQL)
Introduction to GraphQL GraphQL介绍 Learn about GraphQL, how it works, and how to use it in this seri ...
- graphql 新API 开发方式
我们知道 GraphQL 使用 Schema 来描述数据,并通过制定和实现 GraphQL 规范 定义了支持 Schema 查询的 DSQL (Domain Specific Query Langua ...
- [GraphQL] Use GraphQLNonNull for Required Fields
While certain fields in a GraphQL Schema can be optional, there are some fields or arguments that ar ...
- [GraphQL] Use Arguments in a GraphQL Query
In GraphQL, every field and nested object is able to take in arguments of varying types in order to ...
随机推荐
- C语言实现的反转字符串
这段代码大约是10年前写的了,一直收藏在自己的代码仓库里面,贴出来分享下. 网上也有很多类似的代码,学生们用的比较多,工作中用的很少,权做参考. char* ReverseString(char* s ...
- 作为一名程序员,在面试中如何展现你Python的coding能力?
来源商业新知,原文标题:如何在一场面试中展现你对Python的coding能力? 如果你已经通过了招聘人员的电话面试,那么下面正是该展现你代码能力的时候了.无论是练习,作业,还是现场白板面试,这都是你 ...
- git hub 第一篇
昨天跟着菜鸟教程进行操作,问题如下: 1.在git网站进行注册,名称和邮箱 2..忘了在开头建立本地仓库,后来又新建仓库,在仓库右键添加git bash here 3.出现了下边这个错误,参考了很多文 ...
- 移动端过禁止输入emoji表情实现方案
最近手头上的项目有一个需求就是输入框不能输入表情,然后就各种在网上找资料,网上好多人给的方案是: str = str.replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uD ...
- python入门(三):循环
1.for i in xxx xxx: 序列(列表,元祖,字符串) xxx: 可迭代对象 >>> for i in "abc": ... print(i) ...
- 通过windows远程桌面连接CentOS系统
前提: CentOS安装桌面,如果无桌面,请执行 # yum -y groups install "GNOME Desktop" # startx 1 2 配置源 # yum in ...
- 图片转base64上传,视频同理。
body: <input type="file" id="img" type="file" onchange="up()&q ...
- 通过启动函数定位main()函数
如下,通过vc6.0编写一个hello world程序.尝试结合汇编代码.分析启动函数找到main函数. 在printf(xxx)插入断点,调试执行.如下,在堆栈窗口中可见main()下的一个 ...
- http 连接 analysis service (ssas)
当数据仓库搭建好后,我们就可以通过sqlserver的管理工具查看服务器上的数据集了.但是这样挺不方便的,如果要远程访问,那么就可以通过http来连接数据仓库.要配置数据仓库http连接非常的简单.如 ...
- 移动端(处理边距样式)reset.css
移动端reset.css,来自张鑫旭网站的推荐,下载地址:https://huruqing.gitee.io/demos/source/reset.css 代码 /* html5doctor.com ...