伴随着前端领域的快速发展，GraphQL 作为一种高效、灵活、易于使用的数据查询语言也逐渐得到了人们的关注。近年来，除了 Node.js 外，Deno 作为一种新兴的 JavaScript 运行时也备受瞩目。在本文中，我们将介绍如何在 Deno 中使用 GraphQL，以及如何有效地利用它完成前端开发中的数据交互。
何为 GraphQL
为了更好地了解 GraphQL，在本节中我们将简单介绍 GraphQL 是什么，以及为什么可以成为代替 RESTful API 的一种更好的选择。
GraphQL 是一种由 Facebook 开发的数据查询语言，它被设计用于客户端和服务器之间的数据交互。不同于 RESTful API，GraphQL 允许客户端发出自定义数据查询请求，且请求只返回客户端所需的数据，从而避免了 RESTful API 中经常出现的“过度获取数据”的问题。
此外，GraphQL 还具有以下优点：
嵌套的类型：GraphQL 可以使用嵌套类型来减少冗余代码，这样可以更好地组织代码结构。
逐步加载：GraphQL 可以在需要时逐步加载数据，这有助于提高数据交互效率。
丰富的文档：GraphQL 内建 schema，因此所有可用的查询和类型都可以在文档中很好地指明，从而为前后端开发者们提供了更好的编程指南。
分层架构：GraphQL 可以借助中间件完成查询验证、数据转换、性能监控等。
因此，我们可以说 GraphQL 就像是一个“内嵌了 API 的数据查询语言”，在前端开发中使用它可以提供更可靠、高效、整洁的数据交互手段。
Deno 中的 GraphQL
接下来，我们将在 Deno 中使用一个基于 GraphQL 的 API 来示范如何使用 GraphQL。在此之前，我们需要先了解以下几个组件：
Oak：一个基于中间件的 HTTP 框架，可以帮助我们构建 HTTP 服务器。
GraphQL.js：一个用于解析、执行和验证 GraphQL 查询的 JavaScript 库。
Deno 额外组件：因为 Deno 上的 JavaScript 环境部分是不同于 Node.js 的，在使用上需要一些额外的组件和权限设置。本教程使用到的有
deno_std和allow-net权限，可通过以下命令安装：deno install --allow-net https://deno.land/std/examples/welcome.ts
现在，让我们来进入示例代码的实现。
schema.js
在实现 GraphQL API 之前，我们需要定义一个 schema，这个 schema 定义了 API 所使用的类型和操作。以下是一个示例 schema.js 文件的定义：
-- -------------------- ---- -------
------ - --- - ---- -----------------------------------------
------ ----- -------- - ----
---- ---- -
--- ----
------ -------
------- -------
-
---- ----- -
------ -------
-
---- -------- -
-------------- -------- ------- --------- -----
-
--在这个文件中，我们定义了一个 Book 类型，它包含 id、title、author 三个字段；我们还定义了一个 Query 类型，它包含一个 books 字段；最后，我们还定义了一个 Mutation 类型，它包含一个 addBook 操作。每个类型和操作都通过 gql 函数来定义。
resolvers.js
在 schema 中定义好类型和操作之后，我们还需要编写一个 resolver 对象来处理 GraphQL 的数据查询请求。以下是一个示例 resolvers.js 文件的定义：
-- -------------------- ---- -------
----- ----- - ---
------ ----- --------- - -
------ -
------ -- -- ------
--
--------- -
-------- --- - ------ ------ -- -- -
----- ---- - - --- ------------ - -- ------ ------ --
-----------------
------ -----
--
--
--在这个文件中，我们定义了一个空数组 books，相当于一个简单的数据存储，存储书籍信息。然后，我们又定义了一个 resolver 对象，它包含两个字段：Query 和 Mutation，分别对应我们在 schema 中定义的操作。接着，我们编写了一个名为 books 的 resovler 函数，它返回 books 数组；同时，我们定义了另一个名为 addBook 的 resovler 函数，它向 books 数组中添加一本新书并返回该书籍信息。
server.js
现在，我们已经定义好了 API 的 schema 和 resolver 函数。接下来，我们需要使用 Oak 搭建一个 HTTP 服务器并集成 GraphQL API。以下是一个示例 server.js 文件的定义：
-- -------------------- ---- ------- ------ - ----------- - ---- --------------------------------- ------ - ------------ - ---- ----------------------------------------- ------ - -------- - ---- -------------- ------ - --------- - ---- ----------------- ----- --- - --- -------------- ----- -------------- - ----- -------------- --------- ---------- --- -------------------------------- --------------------------------- ------------------- -- --------- -- ---- ------- ----- ------------ ----- ---- ---
在这个文件中，我们首先通过 Application 类创建了一个 Oak 应用；接着，我们使用 applyGraphQL 函数来集成 GraphQL API，将之前定义好的 schema 和 resolvers 传入其中。最后，我们将 GraphQL 服务挂载到应用中。
总结
通过本文的介绍，我们了解到了 GraphQL 的基础概念和优点，以及在 Deno 中如何使用 GraphQL，通过示例代码加深了对 GraphQL 在前端开发中的应用。希望本文对读者们在使用 Deno 的前端开发中起到一定的指导参考作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6485973848841e989445d7ba