如何使用 GraphQL 和 Prisma 构建数据库访问层

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

前言

作为一名前端工程师,我们经常需要处理数据,而数据库是存储数据的重要部分之一。通常情况下,前端工程师需要调用后端 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


猜你喜欢

  • Promise.race 要注意的点

    在 JavaScript 开发中,Promise 是一个非常强大的异步处理机制,它可以使我们更加方便地处理异步操作。而 Promise.race 则是 Promise 中一种比较特殊的使用方式,它可以...

    16 天前
  • GraphQL 中的错误处理:最佳实践

    GraphQL 是一种新兴的 web 应用程序开发协议,旨在解决 REST API 中存在的一些痛点。它提供了一种基于类型系统的查询语言,通过定义客户端需要哪些数据来提高查询效率和灵活性。

    16 天前
  • 如何运用缓存和延迟加载优化 Web 性能?

    作为前端开发者,我们时常需要优化 Web 页面的性能,其中两个主要的优化技术就是缓存和延迟加载。本文将详细介绍如何运用这两项技术来提高 Web 页面的性能,包括它们的概念、优点、实现方式以及使用建议。

    16 天前
  • Express.js 中使用 GraphQL 实现 API 的方法及最佳实践

    介绍 GraphQL 是一种 API 查询语言,它提供了一种更加强大、灵活、高效的方式来获取 API 数据。在 Express.js 中使用 GraphQL,可以简化 API 查询的过程,提高 API...

    16 天前
  • React 通过 State 传递值详解

    在 React 中,State 是一个非常重要的概念。State 是用于存储数据的一种机制,它可以在 React 组件中呈现出不同的状态。 在本文中,我们会详细讲解 React 中 State 的使用...

    16 天前
  • 无障碍辅助设备:为视障人士提供更好的用户体验

    在如今互联网高速发展的时代,更多的人们开始依赖电子产品与互联网,这其中自然少不了视障人士。尤其是在前端开发中,我们应该意识到其中的无障碍设备设计,为视障人士提供更好的用户体验。

    16 天前
  • 使用ESLint保持代码的一致性

    在前端团队中,为了确保代码的质量和可维护性,保持代码的一致性是至关重要的。ESLint 是最受欢迎的 JavaScript 代码检查工具之一,它可以通过配置根据项目中的规则检查代码,规则可以用于减少常...

    16 天前
  • ES10 中的空值合并运算符详解及使用场景介绍

    前言 ES10(也称为 ECMAScript 2019)是 JavaScript 的一个版本,它引入了很多新的特性。其中,空值合并运算符(Nullish Coalescing Operator)是一个...

    16 天前
  • Redux 状态管理优化实践

    Redux 是一个非常有用的状态管理库,可以帮助前端开发者更好地管理复杂的应用程序状态。但是,如果不正确使用,Redux 可能会使应用程序变得复杂难以维护。本文将深入探讨 Redux 优化实践,以帮助...

    16 天前
  • 通过 Tailwind 的前缀类和间接类来快速定位和修改样式

    Tailwind是一个流行的CSS框架,其设计理念是通过预定义的class快速定位和修改样式。 在Tailwind中,class通常由两部分组成:前缀类和间接类。其中前缀类表示样式的某个属性,而间接类...

    16 天前
  • MongoDB 副本集与集群区别及选择

    一、MongoDB 副本集和集群的概念 MongoDB 是一种非关系型数据库,支持副本集和集群两种架构方式。 MongoDB 副本集:是指一组 MongoDB 服务器的集合。

    16 天前
  • TypeScript 中使用依赖注入实现服务的解耦

    TypeScript 中使用依赖注入实现服务的解耦 随着前端应用变得越来越复杂,我们需要更好的代码组织和管理方式。依赖注入是一种实现代码解耦的技术。TypeScript 作为一种强类型的 JavaSc...

    16 天前
  • 如何使用 Chai.js 和 Istanbul 来做代码覆盖率测试?

    在软件开发中,代码覆盖率测试是一项必不可少的活动。通过对代码执行路径的跟踪并记录,代码覆盖率测试可以帮助我们确定代码中哪些部分已经被测试过,哪些部分还需要进一步的测试。

    16 天前
  • 在 ES8 中使用 Proxy 实现内置对象的监听

    ES8(ECMAScript 2017)是 JavaScript 的最新版本,它引入了一种名为 Proxy 的新对象类型。Proxy 是一种高级的元编程机制,它可用于构建代码库以及 JavaScrip...

    16 天前
  • Kubernetes 中如何使用官方提供的 Helm Charts 快速部署服务?

    Helm 是一个在 Kubernetes 中用于管理应用程序的工具,它基于 Charts 的概念提供了一种简单的方式来打包、部署和管理 Kubernetes 应用程序。

    16 天前
  • 解决使用 Custom Elements 时出现的常见错误

    Custom Elements 是 Web Components 标准的其中一部分,它允许开发者自定义 HTML 元素并进行封装,以提高组件的可复用性和可维护性。然而,在使用 Custom Eleme...

    16 天前
  • SPA 应用 SEO 优化实践之 React 项目

    随着互联网的发展,越来越多的网站开始使用单页面应用(SPA)来提供更好的用户体验。这种应用程序的特点是它们只加载一次 HTML,然后通过 AJAX 加载并显示不同的视图,因此用户在与应用程序交互时不必...

    16 天前
  • 使用 Hapi.js 构建 WebSocket 应用程序

    WebSocket 是一种在客户端和服务器之间建立双向通信的协议,使用它可以实现实时的数据传输和即时通信。在制作实时应用程序或在线游戏时使用 WebSocket 是非常方便和有效的。

    16 天前
  • 如何使用 Tailwind 在不同媒体查询下实现响应式设计

    在现代 Web 开发中,响应式设计成为了不可忽视和必须掌握的一项技能,因为不同的屏幕尺寸和设备类型需要不同的布局和样式。为了方便和高效地实现响应式设计,Tailwind 成为了越来越流行的 CSS 框...

    16 天前
  • 如何在 Cypress 中处理页面滚动?

    介绍 Cypress 是一个流行的前端自动化测试工具,但是在测试一些需要滚动页面的场景时,我们需要更多的技巧来处理页面滚动。在本文中,我们将探讨如何在 Cypress 中处理页面滚动,以方便更好的编写...

    16 天前

相关推荐

    暂无文章