🔥 GraphQL 速成课程（10 张图片！）

最初在 Twitter 上以主题形式发布：https://twitter.com/hexrcs/status/1190332090149150720

一直想在新项目中使用 GraphQL，但却没时间学习它的工作原理？😃

让我们带着一些新的 GraphQL 知识开始新的一周吧！🙌

👇 这里有 10 分钟的 GraphQL 速成课程！🥳

1 - GraphQL 的工作原理

GraphQL 是一种用于进行灵活 API 调用的查询语言。

我们在具有嵌套字段的单个请求中描述我们想要的内容，然后我们将收到精确形状的数据负载。

无需发出许多小请求来将数据拼接在一起或过度获取不需要的部分！

2 - GraphQL 查询交换

GraphQL 不是一个库，而是一个语言规范。

我们以 POST 或 GET 请求的形式发送结构化查询。服务器根据预定义的模式检查查询是否有效，运行相应的解析器函数执行操作，然后准备返回给客户端的数据。

3 - GraphQL Schema

GraphQL Schema 定义了有效查询的结构及其返回的数据类型。它是客户端和服务器进行通信的协议。

它们是强类型的，可以嵌套。除了最常见的“对象”类型外，该模式还支持联合、枚举、接口等。

GraphQL 中有 3 种操作类型 - query、mutation或subscription。query是最常用的操作。

4 - 论证

某些查询允许我们传递参数，例如用于过滤结果。Schema 定义了所有有效参数。

在后端，我们需要有相应的解析器来完成这些条件查询。

注意：GraphQL 没有内置比较运算符或类似 SQL 中的 or 函数！>这些附加功能必须在解析器中实现。不过，大多数 GraphQL 框架已经自带了这些实用解析器。TOPLIMIT

5 - 别名

有时在查询中，我们会多次选择同一个字段，但每次都使用不同的参数（如图所示）。这会导致命名冲突，因此我们需要为字段分配别名。

可以将别名添加到任何字段。

6 - 片段

我们可以将“子字段”包装到 Fragment 中，并在选择中使用扩展运算符进行复用。当我们反复选择相同的字段时，这非常有用。可以将其视为可解构的 GraphQL 字段名称的 JS 对象！

片段与主要操作一起在queryHTTP 请求有效负载的字段中发送到服务器。

7 - 变量

使用 GraphQL 变量可以轻松模块化并共享/重用我们预先编写的查询代码。我们在查询开始时声明它们，并允许为其分配默认值。变量可以嵌套，就像普通的 JSON 对象一样。

注意到第2 部分 - GraphQL 查询交换的图片中的 GraphQL 请求负载了吗？这就是“变量”字段的用途。

8 - 界面

GraphQL 模式中的接口允许我们以 OOP 方式灵活地创建和使用复杂数据类型。

类型可以实现（多个）接口。

当返回类型是接口时，我们可以使用on关键字有条件地访问特定实现的字段。

9 - 变异操作

与查询相反，Mutation 操作用于更改服务器端数据 - 例如创建帐户、生成身份验证令牌或添加数据条目。

与查询类似，我们可以为突变提供参数。突变也会返回值，所以别忘了选择我们需要的字段！

10 - 订阅操作

GraphQL 不仅通过 HTTP 来回发送查询，还具有用于创建 WebSocket 连接的订阅操作类型，因此服务器可以将持续更新推送到客户端。

对于💹股票市场或💬消息应用程序等实时应用程序特别有用。

奖金

在线游乐场

许多 GraphQL 框架都自带 Web IDE，支持自动补全和交互式模式查找，例如GraphiQL或GraphQL Playground。调试查询时不妨利用它们！✨

您还可以通过选择Apollo GraphQL Server沙盒，使用CodeSandbox在线创建自己的游乐场。

但是，如果你和我一样懒的话🤪，还有一些零配置的公共 GraphQL API 可以在线使用👉 https://apis.guru/graphql-apis/

其他资源

Ladybug Podcast上有一集关于 GraphQL 的精彩内容，一定要看看！

希望你喜欢这门 GraphQL 速成课程！😁 祝你度过一个愉快而高效的一周！🙌

（线程速成课程格式受到@chrisachard启发😁查看他出色的 React/Redux、Git 速成课程！）

趁你还在这里，如果你还有 13 分钟的时间，并且有兴趣学习新的热门框架 Svelte，我这里还有一个速成课程和配套视频👉Svelte速成课程🔥

喜欢这篇文章吗？

我将在 Twitter 上发布更多内容：@hexrcs
您也可以在我的主页上找到我：xiaoru.li