GraphQL（一）：GraphQL介绍

UnixAgain 发布于2019-05-23 17:32 / 2505人阅读

摘要：怎么使用致力于提供一种直观的弹性语法系统，用以描述客户端程序设计时的数据需求以及数据交互行为。这意味着客户端需要的数据，已经在中制定好了。中采用的方式截然不同，的通常只暴露一个接口，而不是返回固定数据结构的多个接口。

GraphQL是什么

GraphQL是facebook开源的一套数据交互方案，它并非某种具体的语言或者框架，它只是提供了一套解决方案，这套解决方案通过GraphQL规范进行定义，不同语言可以有自己的GraphQL实现，目前已经有很多语言完成了GraphQL的实现，可以在这里查看。

怎么使用GraphQL

GraphQL致力于提供一种直观的弹性语法系统，用以描述客户端程序设计时的数据需求以及数据交互行为。通俗地讲就是允许客户端在请求中精确的定义自己需要什么，服务端根据客户端的请求精确的返回相应的内容。比如有如下两个相互关联的实体：

Teacher{
    name: String
    phone: String
    age: Int
}

School{
    id: String
    name: String
    address: String
    teachers: List
}

使用GraphQL查询指定学校的名称是这样的：

school(schoolId: "schoolId1"){
    name
}

data{
    "name" : "北京大学"
}

如果想要查询学校的名称以及所有老师的名字和电话：

school(schoolId: "schoolId1"){
    name
    teachers{
        name
        phone
    }
}

将得到：

data{
    "name" : "北京大学"
    "teachers" : [
        {
            "name" : "李老师",
            "phone" : "13312345678"
        }，
        {
            "name" : "张老师",
            "phone" : "13312345673"
        }，
        {
            "name" : "王老师",
            "phone" : "13312345672"
        }
    ]
}

以上只演示了GraphQL提供的查询（query）功能，GraphQL还支持修改（mutation）和订阅（subscription）。

要使得客户端可以使用GraphQL的方式请求数据，首先需要在服务端提供GraphQL服务，这里可以查看现有的实现了GraphQL的平台，关于如何搭建GraphQL的服务，请查看GraphQL（二）：GraphQL服务搭建

同时，GraphQL提供了强大的开发者工具GraphiQL，可以实时查看数据模型和API，为前后端开发者提供了一个便捷的沟通平台。

为什么要使用GraphQL

通过上面的内容，大致可以了解GraphQL给前后端数据交互带来的变化。使用RESTful风格的API，会从指定接口加载数据。每个接口都明确定义了返回的数据结构。这意味着客户端需要的数据，已经在URL中制定好了。GraphQL中采用的方式截然不同，GraphQL的API通常只暴露一个接口，而不是返回固定数据结构的多个接口。 GraphQL返回的数据结构不是一成不变的，而是灵活的，让客户端来决定真正需要的是什么数据。

这样的变化能够在一定程度上解决使用RESTful风格接口完成数据交互时会遇到的问题：

多端点，每个API都有自己的路径需要管理

API数量庞大，新人自学习困难 GraphQL通过图的方式来组织模型，结合GraphiQL，新人能够快速上手

后端数据模型难以规范 RESTful接口多为页面驱动，后端可能会设计很多差别不大的模型，目前并没有一种强约束去要求后端开发人员规范模型，GraphQL要求在一开始就完成业务模型的分析和定义，避免后面业务模型的泛滥

在API设计时往往是面向页面的，而页面相比模型具有更差的稳定性

API文档维护工作量大 RESTful的API需要管理大量文档，但是依然存在文档更新、文档查阅方便的问题，虽然可以动用人力完善工具去解决，但是GraphQL天然就自带文档工具特性。我们在定义字段时，一并写上description，通过GraphiQL可以实时查看：

type School {
    id: ID!
    # 学校id
    schoolId: String
    # 学校名称
    schoolName: String
    # 学校年龄
    schoolAge: Int
    # 学校地址
    schoolAddress: String
    # 学校包含的老师
    teachers: [Teacher]
    # 校长
    master: String
}

GraphiQL中查看：

6. 数据聚合较为麻烦这是在后端经常需要处理的问题，比如，客户端需要一些数据，我们定义了一个RESTful的接口，但是这些数据分别在A和B服务中，最终我们会在后台手动聚合A和B的数据到一个模型里返回。而GraphQL通过不同的Resolver天然完成了数据聚合功能

GraphQL解除了接口和数据之间的绑定，对业务数据模型做了抽象和整理，以图的方式来明确模型之间的关系，通过这些关系，具体业务场景可以定制自己的数据，不同的业务场景只要基于同样一套基础数据模型就可以复用过往的接口。

以上好处讲起来有些抽象，需要多多实践多多体会。

GPU云服务器云服务器 GraphQL 自我介绍平台介绍相关介绍

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/7355.html

GraphQL 技术栈揭秘

摘要：关注业务，而不是技术将数据需求放在它们所属的客户端。技术栈中的每一部分都起着作用技术栈中所有部分之间的协作可以借助缓存来完成。现在，我们来看看另一个贯穿整个技术栈的功能的例子。你可以认为是首个内置细粒度查看的技术。本文整理自2017年 GraphQL 峰会上的演讲，详述缓存、追踪、模式拼接和 GraphQL 未来发展等有关话题。 Facebook 开源 GraphQL 至今已两年有余...

zzbo 2019-08-21 17:48 评论0 收藏0
【CuteJavaScript】GraphQL真香入门教程

摘要：最终代码省略其他输入类型用标识查询类型需要至少定义一个不要会不显示查询这里需要转成数组因为前面定义了返回值是类型相当于数据库的添加操作相当于数据库的更新操作省略其他现在我们可以启动服务器，在上测试下效果了。 showImg(https://segmentfault.com/img/remote/1460000019142304?w=893&h=438); 看完复联四，我整理了这份 Gr...

bingo 2019-08-26 13:44 评论0 收藏0
react+graphql起手和特性介绍（三）

摘要：如果你对这系列文章有疑问或发现有错误的地方，欢迎在下方留言讨论。紧接上篇react+graphql起手和特性介绍（二），介绍完graphql与koa的服务搭建和graphql的一些常用特性，接下来我们介绍下在react中如何使用graphql我们使用create-react-app创建react应用： npm i -g create-react-app mkdir react-gra...

soasme 2019-08-23 13:50 评论0 收藏0
GraphQL and Relay 浅析

摘要：包括什么把关于数据获取的事情都接管过来，比如说请求异常，，请求排队，，获取分页数据。的声明式数据获取是按组织的，最好的方式也是把需要的数据写在。另外，通过声明式数据获取还可以更好的对组件约束，只能获取它声明的数据，并且也可以做些验证。 Facebook 在去年夏天公布了 GraphQL，就像往前端深潭砸下了一颗巨石，人们都被水声吸引到了湖边，观望是否会出现什么，有些人期待，有些人猜疑。...

Luosunce 2019-08-19 17:49 评论0 收藏0
GraphQL 和 Apollo 为什么能帮助你更快地完成开发需求？

摘要：开发者体验可以帮助团队更快地实现功能上线，因为它对开发者的体验非常好。可以显示每个的埋点指标，可以帮忙你定位错误，可以分析中请求的每个字段的分布频率。产品案例虽然规范是由在年公布的，但是自年以来，就是移动应用开发的重要组成部分。在大前端应用的开发过程中，如何管理好数据是一件很有挑战的事情。后端工程师需要聚合来自多个数据源的数据，再分发到大前端的各个端中，而大前端工程师需要在实现用户体...

LucasTwilight 2019-08-23 16:33 评论0 收藏0