在前端开发中，我们经常需要与数据库进行交互，以获取或修改数据。而在现代化的应用程序中，GraphQL 和 MongoDB 的组合已成为一种流行的选择。GraphQL 是一种查询语言，它可以帮助我们更好地管理数据请求和响应。而 MongoDB 是一个文档数据库，它可以轻松地存储和查询 JSON 格式的数据。在本文中，我们将探讨如何将这两个技术整合在一起，并提供一些示例代码。
什么是 GraphQL？
GraphQL 是一种用于 API 的查询语言，它由 Facebook 开发并在 2015 年首次公开发布。它允许客户端指定需要获取的数据字段和它们的关系，从而获得更精确的数据。相比于 REST API，GraphQL 更加灵活和高效，因为它可以减少不必要的数据传输。
GraphQL 有三个主要的组成部分：
- 查询语言，它定义了客户端可以请求的数据字段和它们的关系。
- 服务端运行时，它解析客户端查询，并返回所需的数据。
- 类型系统，它定义了可查询的数据类型和它们之间的关系。
什么是 MongoDB？
MongoDB 是一个开源的文档数据库，它使用 JSON 格式存储数据。MongoDB 支持灵活的数据模型，可以轻松地存储和查询不同结构的数据。MongoDB 还具有高可扩展性和高可用性，因为它可以在多个节点上进行复制。
MongoDB 中的数据存储在集合中，集合类似于关系数据库中的表。每个文档都是一个 JSON 对象，它可以包含不同类型的数据，如字符串、数字和数组。
如何将 GraphQL 和 MongoDB 整合在一起？
GraphQL 和 MongoDB 的整合需要使用一个中间件，它可以将 GraphQL 查询转换为 MongoDB 查询，并返回所需的数据。在本文中，我们将使用 graphql-compose-mongoose，它是一个用于将 MongoDB 模型转换为 GraphQL 类型的库。
安装和配置 graphql-compose-mongoose
首先，我们需要安装 graphql-compose-mongoose 和 mongoose。mongoose 是一个 MongoDB ORM，它可以帮助我们更轻松地与 MongoDB 进行交互。
npm install graphql-compose-mongoose mongoose
接下来，我们需要定义 MongoDB 模型，并使用 graphql-compose-mongoose 将其转换为 GraphQL 类型。我们可以将以下代码添加到我们的项目中：
-- -------------------- ---- ------- ----- - ------------------- - - ------------------------------------ ----- - ------- ----- - - -------------------- ----- ---------- - --- -------- ------ ------- ------- ------- ------------ ------- --- ----- ---- - ------------- ------------ ----- ------ - -------------------------- -------------- - - ----- ------ --
在此代码中，我们定义了一个名为 Book 的 MongoDB 模型，并使用 composeWithMongoose 将其转换为 GraphQL 类型。BookTC 变量是一个包含了所有 GraphQL 操作的类型组合器。
定义 GraphQL 查询
接下来，我们需要定义 GraphQL 查询，以便客户端可以请求所需的数据。我们可以将以下代码添加到我们的项目中：
-- -------------------- ---- -------
----- - ------------------ -------------- ------------ -------------- - - -------------------
----- --------- - --- -------------------
----- ------------
------- -
------ -
----- ------------------------------
-------- -- -- ------------
--
----- -
----- -----------------
----- - --- - ----- --- ----------------------------- - --
-------- --- - -- -- -- ------------------
--
--
---
----- ------ - --- ---------------
------ ----------
---在此代码中，我们定义了一个名为 BookQuery 的 GraphQL 对象类型，并在其中定义了两个查询字段：books 和 book。books 字段返回所有图书的列表，而 book 字段根据 ID 返回单个图书。
定义 GraphQL 修改
除了查询之外，我们还需要定义 GraphQL 修改，以便客户端可以更改数据。我们可以将以下代码添加到我们的项目中：
-- -------------------- ---- -------
----- ------------ - --- -------------------
----- ---------------
------- -
----------- -
----- -----------------
----- -
------ - ----- --- ----------------------------- --
------- - ----- --- ----------------------------- --
------------ - ----- --- ----------------------------- --
--
-------- --- ----- -- ------------------
--
----------- -
----- -----------------
----- -
--- - ----- --- ----------------------------- --
------ - ----- ------------- --
------- - ----- ------------- --
------------ - ----- ------------- --
--
-------- --- ----- -- ------------------------------- ----- - ---- ---- ---
--
----------- -
----- -----------------
----- - --- - ----- --- ----------------------------- - --
-------- --- - -- -- -- ---------------------------
--
--
---
----- ------ - --- ---------------
------ ----------
--------- -------------
---在此代码中，我们定义了一个名为 BookMutation 的 GraphQL 对象类型，并在其中定义了三个修改字段：createBook、updateBook 和 deleteBook。createBook 字段创建一本新书，updateBook 字段更新一本书的信息，deleteBook 字段删除一本书。
运行 GraphQL API
最后，我们需要运行我们的 GraphQL API，以便客户端可以请求数据。我们可以将以下代码添加到我们的项目中：
-- -------------------- ---- -------
----- ------- - -------------------
----- - ----------- - - ---------------------------
----- --- - ----------
--------
-----------
-------------
-------
--------- -----
--
--
---------------- -- -- ------------------- ------- -- ---- --------在此代码中，我们使用 express 库创建了一个 HTTP 服务器，并将 graphqlHTTP 中间件添加到 /graphql 路径。graphiql 选项启用了 GraphiQL IDE，它可以帮助我们测试我们的 API。
在客户端中使用 GraphQL API
现在我们已经创建了一个 GraphQL API，我们可以在客户端中使用它。我们可以使用任何支持 GraphQL 的客户端库，例如 apollo-client 或 relay。
以下是一个使用 fetch API 进行请求的示例：
fetch('/graphql', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ query: '{ books { title author } }' }),
})
.then((res) => res.json())
.then((data) => console.log(data));在此代码中，我们向 /graphql 路径发送了一个 POST 请求，并使用 GraphQL 查询语言请求了所有图书的标题和作者。在响应中，我们得到了一个包含所需数据的 JSON 对象。
总结
在本文中，我们探讨了如何将 GraphQL 和 MongoDB 整合在一起，并提供了一些示例代码。GraphQL 和 MongoDB 的组合可以帮助我们更好地管理数据请求和响应，并提高应用程序的性能和可扩展性。如果您正在构建一个现代化的应用程序，那么考虑使用 GraphQL 和 MongoDB，它们将成为您的有力工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c072ceadd4f0e0ffa57398