前言
作为一名前端工程师，我们经常需要处理数据，而数据库是存储数据的重要部分之一。通常情况下，前端工程师需要调用后端 API 才能访问数据库中的数据。而在一些小型项目中，通过使用 GraphQL 和 Prisma，前端开发人员也可以轻松地构建自己的数据库访问层。
在本文中，我们将介绍如何使用 GraphQL 和 Prisma 构建数据库访问层，并提供示例代码帮助你理解如何实现。
GraphQL 简介
GraphQL 是一种数据查询语言，由 Facebook 开发而来。相对于传统的 REST API，GraphQL 具有更高的灵活性和可扩展性。GraphQL 的核心思想是 “只请求所需数据”，前端开发人员可以仅仅请求需要的数据，并仅仅获取所需的数据，而不用像 REST API 那样获取整个数据资源的所有数据。
比如，假设我们需要获取一篇文章的信息，我们可以使用以下查询：
-
----------- ---- -
-----
------ -
----
-
-------- -
----
---- -
----
-
-
-
-GraphQL 会从数据库中获取所请求的数据，并将其以 JSON 对象的形式返回。前端开发人员可以根据这些数据来渲染 UI。
Prisma 简介
Prisma 是一个开源的 ORM（对象关系映射）工具，它可以自动生成 GraphQL API 和数据库访问层。使用 Prisma，我们可以简化数据库连接和数据管理，甚至可以跳过后端开发人员，直接使用 Prisma 与数据库进行交互。
Prisma 支持多种数据库，包括 MySQL、PostgreSQL 和 SQLite 等。在本文中，我们将以 PostgreSQL 为例进行讲解。
使用 Prisma 构建 GraphQL API
在介绍如何使用 Prisma 构建 GraphQL API 之前，我们需要先确保已安装以下软件：
- Node.js（版本不低于 10）
- Docker
安装完成后，我们可以使用以下命令来创建一个新的 Prisma 项目：
- ----- ----------- - -- ----------- - --- ------ ----
执行以上命令后，Prisma CLI 会引导你完成项目初始化过程，并且创建一个空的 Prisma 服务。接着，我们可以在 prisma/schema.prisma 文件中定义我们的数据模型，例如：
---------- -- - -------- - ------------ --- - ------------------- - ----- ---- - -- --- --- ------------------------- ---- ------ ----- ------ ------- -------- ------ ----- ------ - ----- ---- - -- --- --- ------------------------- ----- ------ ------- ------ ------ ---- ----------------- ----------- ----------- ----- -------- --- -------- --------- - ----- ------- - -- --- --- ------------------------- ---- ------ ---- ---- ----------------- --------- ----------- ----- ------ --- ---- ---- ----------------- --------- ----------- ----- ------ --- -
在上述数据模型中，我们定义了 User、Post 和 Comment 三个数据模型，每个数据模型都包含多个属性。例如，Post 数据模型中包含了 title、content 和 author 三个属性，其中 author 属性与 User 数据模型建立了数据关系。
接着，我们可以使用 Prisma CLI 来创建数据库迁移并将数据模型应用到数据库中：
- --- ------ ------- --- ------ ----
执行以上命令后，Prisma CLI 将会创建一个数据库迁移，并将我们定义的数据模型应用到数据库中。接着，我们可以使用以下命令来启动 Prisma 服务：
- --- ------ ------
执行以上命令后，Prisma 会启动一个本地的 web 服务，我们可以通过访问 http://localhost:5555 在浏览器中打开 Prisma Studio，用于管理数据库中的数据。
到这里，我们已经成功地使用 Prisma 创建了数据库，并在其中应用了我们定义的数据模型。
使用 GraphQL 查询数据
在我们成功创建数据库之后，我们可以开始使用 GraphQL 来查询数据库中的数据。为了使用 GraphQL，我们需要安装 graphql-yoga 这个库：
- --- ------- ------------
接着，我们可以创建一个 index.js 文件，并添加以下代码：
----- - ------------- - - -----------------------
----- - ------------ - - -------------------------
----- ------ - --- --------------
----- -------- - -
---- ----- -
------ ------
------ ------
--------- ---------
-
---- ---- -
--- ----
----- -------
------ -------
--------- -------
------ --------
-
---- ---- -
--- ----
------ -------
-------- -------
------- -----
--------- -----------
-
---- ------- -
--- ----
----- -------
----- -----
----- -----
-
-
----- --------- - -
------ -
------ -- -- -
------ ----------------------
--
------ -- -- -
------ ----------------------
--
--------- -- -- -
------ -------------------------
--
--
----- -
------ -------- -- -
------ -----------
-------------
------ -
--- ----------
--
--
--------
--
--
----- -
------- -------- -- -
------ -----------
-------------
------ -
--- ----------
--
--
---------
--
--------- -------- -- -
------ -----------
-------------
------ -
--- ----------
--
--
-----------
--
--
-------- -
----- -------- -- -
------ --------------
-------------
------ -
--- ----------
--
--
-------
--
----- -------- -- -
------ --------------
-------------
------ -
--- ----------
--
--
-------
--
--
-
----- ------ - --- ---------------
---------
----------
--
--------------- -- ------------------- -- ------- -- ------------------------在以上代码中，我们定义了一个 GraphQL 服务器，它包含三个数据查询字段（users、posts 和 comments）以及三个数据模型（User、Post 和 Comment）。
每个数据查询字段都对应了一个 Prisma 客户端方法，用于获取数据库中的数据。而每个数据模型字段都包含了一个 resolver 函数，它与 Prisma 数据库的查询方法对应。
接着，我们可以使用以下命令来启动 GraphQL 服务器：
- ---- --------
执行以上命令后，GraphQL 服务器将会启动，并将使用 Prisma 客户端方法来查询数据库中的数据。我们可以通过访问 http://localhost:4000 来打开 GraphQL Playground，尝试使用 GraphQL 查询数据。
例如，假设我们需要获取所有用户的信息，我们可以使用以下查询：
----- -
----- -
--
----
-----
--------
----- -
--
-----
-------
-
-
-GraphQL 服务器将返回一个 JSON 对象，其中包含了查询结果。
结论
通过使用 GraphQL 和 Prisma，前端工程师可以轻松构建自己的数据库访问层，而无需专业的后端开发人员帮助。在这篇文章中，我们详细介绍了如何使用 GraphQL 和 Prisma 构建数据库访问层，并提供了示例代码帮助你理解如何实现。希望这篇文章能够对你在构建前端项目时有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671a21469babaf620fa1751e