使用 GraphQL 和 Prisma 构建现代 Web 应用

引言

GraphQL 和 Prisma 是两个非常流行的现代 Web 开发技术。GraphQL 是一种用于 API 的查询语言和运行时环境，能让客户端发送一个描述性的查询请求，获得准确的数据。而 Prisma 是一个开源数据库工具，提供了简单易用的 ORM（对象关系映射） API，帮助开发者管理数据库并操作数据。

本文将会介绍如何使用 GraphQL 和 Prisma 构建现代 Web 应用。我们将首先深入了解 GraphQL 和 Prisma 的特性，然后使用示例代码来展示如何将二者相结合建立一个 Web 应用。

GraphQL

GraphQL 是一种用于 API 的查询语言和运行时环境，它能够减少前端和后端之间的通信，让前端能够准确地请求所需要的数据。它的工作原理是，客户端发送一个描述性的 GraphQL 查询请求给服务器，服务器返回一个 JSON 字符串作为响应，其中只包含客户端需要的数据。

相较于传统的 RESTful API，GraphQL 具有以下优点：

  • 精确的数据请求：客户端可以按需请求它所需要的具体数据，而非一整个 JSON 文档
  • 更少的网络通信：GraphQL 只会返回客户端需要的数据，减少了网络传输的负担
  • 模式强制：GraphQL 强制前后端之间的数据协议，防止出现数据不一致等问题

GraphQL 的语法非常简单易懂，以下是一个 GraphQL 查询示例：

----- -
  ----------- ---- -
    ----
    -----
    ----- -
      -----
      -------
    -
  -
-

在这个查询中，客户端请求了一个 id 为 1 的用户的 name 和 email 属性，以及该用户的所有帖子的 title 和 content 属性。

Prisma

Prisma 是一个现代化的 ORM（对象关系映射）框架，支持 TypeScript 和 JavaScript。它提供了一种简单的方法来与数据库进行交互，比传统的 ORM 更易于使用。

Prisma 的主要特点包括：

  • 简单的数据模型：Prisma 数据模型使用的是 GraphQL SDL（Schema Definition Language）语法，易于理解和编写
  • 兼容多种数据库：Prisma 可以与各种常见数据库进行交互，如 PostgreSQL、MySQL 和 MongoDB 等
  • 可扩展性：Prisma 的模块化框架使得它可以轻松进行扩展和定制

以下是一个使用 Prisma 配置数据库连接的示例：

------ - ------------ - ---- ----------------

----- ------ - --- --------------

----- -------- ------ -
  ----- ---- - ----- --------------------
    ----- -
      ------ -----------------------
      ----- ----- -----
      ------ -
        ------- -
          ------ ------- --------
          -------- ----- -- -- ----- ------
        --
      --
    --
  --
  -----------------
-

------
  -------- -- -----------------
  -------------- -- -- ----- ---------------------

在这个示例中，我们定义了一个名为 user 的对象，它包含了一个 email、一个 name 属性和一个 posts 嵌套属性。posts 属性又包含了一个 title 和一个 content 属性。我们使用上述对象创建一个新的用户，并在该用户下创建一篇名为 "Hello, World!" 的文章。

GraphQL 和 Prisma 的结合

现在我们已经了解了 GraphQL 和 Prisma 单独的特点，接下来我们来看看如何将两者结合起来创建一个现代化的 Web 应用。

第一步：创建 Prisma 数据模型

我们首先需要创建一个包含数据模型的 Prisma 项目。在该项目中，我们定义了如下 Model 数据模型：

----- ---- -
  --        ---     --- -------------------------
  -----     ------  -------
  ----      -------
  -----     ------
-

----- ---- -
  --        ---     --- -------------------------
  --------- -------- ---------------
  --------- -------- ----------
  -----     ------
  -------   ------
  --------- ------- ---------------
  ------    ----    ----------------- ----------- ----------- -----
  --------  ---
-

该模型定义了两个实体，User 和 Post。一个 User 对象包含了 id、email、name 和一个 Post 数组。一个 Post 对象包含了 id、createdAt、updatedAt、title、content、published 和 author 等属性。

注意：实体之间存在一对多的关系。每个 Post 知道它属于哪个 User，因为它包含了一个名为 authorId 的属性。

第二步：编写 GraphQL 业务逻辑

我们需要编写一个 GraphQL API 来管理上述数据模型。以下是 API 的实现：

---- ---- -
  --- ----
  ------ -------
  ----- ------
  ------ --------
-

---- ---- -
  --- ----
  ---------- ---------
  ---------- ---------
  ------ -------
  -------- -------
  ---------- --------
  ------- -----
-

----- --------- -
  ------ -------
  -------- -------
  ---------- --------
-

---- ----- -
  ----------- ------ ----
  ----------- ------ ----
  ------------------ --------
  -------------------- --------
-

---- -------- -
  ----------------- -------- ----- -------- -----
  -------------------- ----- ----- ------------ -----
  -------------- ----- ----- ----------- ----
  -------------- ------ ----
-

在这个 Schema 中，我们定义了两个 Object Type，User 和 Post，它们分别代表了 Prisma 中的两个实体。我们还定义了一个 Mutation 类型和一个 Query 类型，Mutation 类型含有多个函数用于创建、更新和删除资源。Query 类型则用于查询资源。

第三步：编写 Resolver

Resolver 是实现 GraphQL API 业务逻辑的函数。以下是 Resolver 的具体实现：

------ - ------------ - ---- ----------------

--------- ------- -
  ------- ------------
-

----- --------- - -
  ------ -
    -------- ----- --- - -- -- - ------ -- -------- --
      ----- ------------------------ ------ - -- - ---
    -------- ----- --- - -- -- - ------ -- -------- --
      ----- ------------------------ ------ - -- - ---
    ------------------ ----- --- --- - ------ -- -------- --
      ----- ---------------------- ------ - ---------- ---- - ---
    -------------------- ----- --- --- - ------ -- -------- --
      ----- ---------------------- ------ - ---------- ----- - ---
  --
  --------- -
    ----------- ----- --- - ------ ---- -- - ------ -- -------- --
      ----- -------------------- ----- - ------ ---- - ---
    ----------- ----- --- - --------- ---- -- - ------ -- -------- --
      ----- --------------------
        ----- -
          --------
          ------- - -------- - --- -------- - --
        --
      ---
    ----------- ----- --- - --- ---- -- - ------ -- -------- --
      ----- --------------------
        ------ - -- --
        ----- - ------- --
      ---
    ----------- ----- --- - -- -- - ------ -- -------- --
      ----- -------------------- ------ - -- - ---
  --
  ----- -
    ------ ----- -- -- -- -- - ------ -- -------- --
      ----- ---------------------- ------ - --------- -- - ---
  --
  ----- -
    ------- ----- -- -------- -- -- - ------ -- -------- --
      ----- ------------------------ ------ - --- -------- - ---
  --
-

------ ------- ---------

这段代码定义了每个字段的实现，如 getUser 对应了 prisma.user.findUnique 方法。注意，GraphQL 使用到了 Context，我们可以在 Context 里面传入 PrismaClient 的实例。在 resolvers 里我们可以解构出 Context 的 prisma 对象使用它来处理数据，这里的例子中我们使用 prisma.user 创建用户、prisma.post 创建文章、prisma.post.findMany 查询文章等。

第四步：集成 GraphQL Server & Prisma Client

我们需要将以上所有的实现组合起来，并在 GraphQL Server 启动时进行初始化。因此，我们需要一个文件来设置 GraphQL Server 和 PrismaClient。

以下是该文件的实现：

------ - ------------ - ---- -----------------------
------ ------- ---- ---------
------ --------- ---- -------------
------ - ------------ - ---- ----------------

----- ------ - --- --------------

----- --- - ---------

----- ------ - --- --------------
  --------- ----------------------------
  ----------
  -------- -- --- -- -- -
    ------ -
      -------
      -------
    -
  --
--

-----------------------
------------------------ --- --

---------------- -- -- -
  ------------------- ------- -- ------------------------
--

通过以上代码，我们可以编写一个简单的 Express.js Web 应用，该应用会使用步骤一中创建的 Prisma 数据模型和步骤二中定义的 GraphQL 的 API 接口。最后使用上述四部曲成功集成 Prisma 和 GraphQL 的 Server 代码示例完成。

总结

本文介绍了如何使用 GraphQL 和 Prisma 构建现代化的 Web 应用。我们首先了解了 GraphQL 和 Prisma 分别的特点，然后结合实例，深入理解了如何使用两者构建现代 Web 应用。这些有益的技术知识可以帮助开发者更快速地创建 Web 应用程序，减少了开发成本和时间，同时提高了 API 的质量和效率。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65ba1a73add4f0e0ff2a6543

阅读全文

猜你喜欢

  • 解决 ES8 Array.prototype.flat() 在部分浏览器中不支持嵌套数组拍平的兼容性问题

    在ES8中新增加了 Array.prototype.flat() 方法来把嵌套数组（nested array）拍平到指定的 depth 层次。但是，这个方法在部分浏览器中不被支持，这就导致了新写的代码...

    9 个月前
  • Tailwind 如何处理文件的引入和自定义

    Tailwind 是一个非常受欢迎的前端框架，它可以帮助开发者快速地构建页面样式，而不必编写大量的 CSS 代码。在 Tailwind 中，不仅包含了许多预定义的样式类，还可以自定义样式，这篇文章将重...

    9 个月前
  • 在 GraphQL 中使用 GraphQL-Yoga 实现服务端的技术实现

    前言 GraphQL 是一个新兴的服务端API查询语言和运行时，可以在多种客户端语言中进行操作，如JavaScript，iOS，Android，Java等。GraphQL 可以极大地提高API查询的效...

    9 个月前
  • SASS 中 @extend 指令的实际应用

    SASS 中 @extend 指令的实际应用 在前端开发中，样式的重用性非常重要，能够减少重复的代码量和维护成本。而 SASS 提供了一种非常方便的方式来实现样式重用，就是使用 @extend 指令。

    9 个月前
  • React + TypeScript + Redux：从零开始

    在前端开发中，React 和 Redux 组合是非常强大的，但是使用 TypeScript 可以使代码更加健壮和可维护。本文将介绍如何在 React 应用中集成 TypeScript 和 Redux，...

    9 个月前
  • RxJS 中使用 filter 操作符实现数据筛选和转化

    RxJS 是一个强大的 JavaScript 库，可以将异步数据流看作序列，可以方便地对这个序列进行各种处理。其中 filter 操作符是一个常用的数据筛选和转化工具，通过使用 filter 操作符，...

    9 个月前
  • 使用 Babel 编写可靠的 Node.js 应用

    前言 Node.js 是目前使用最广泛的服务器端 JavaScript 运行环境。使用 Node.js 开发 Web 应用程序是非常流行的，然而，不同的 Node.js 版本可能会导致应用之间的兼容性...

    9 个月前
  • 解决 Custom Elements 在 WebStorm 中的调试问题

    解决 Custom Elements 在 WebStorm 中的调试问题 Custom Elements 是 Web 组件标准的一个重要特性，它允许开发者在浏览器中定义自己的 HTML 标签，从而提高...

    9 个月前
  • 基于 Koa2 的数据压缩和加密实现

    随着网络技术的不断发展和进步，前端的应用场景变得愈发广泛和复杂。为了满足用户体验和安全性的要求，前端开发者需要不断提升技术水平和掌握新的技能。本文将介绍如何基于 Koa2 实现数据压缩和加密，旨在提供...

    9 个月前
  • Headless CMS 中 SEO 优化的秘技们

    简介 随着前端开发技术的不断发展，越来越多的网站采用 Headless CMS 架构，这种架构允许前端开发者只专注于前端的开发，后台数据则由 CMS 系统负责管理。

    9 个月前
  • Cypress 自动化测试实践：使用其它断言库扩展 Cypress

    Cypress 是目前比较流行的前端自动化测试框架，提供了很多方便的 API 帮助我们编写自动化测试用例，但是它自带的断言库有一些局限性，比如无法直接支持异步测试，也无法使用 chai 的一些插件，因...

    9 个月前
  • Kubernetes 在互联网公司的应用和实践

    前言 随着互联网业务的快速发展，对于云计算和容器化技术的需求日益增长。Kubernetes 作为一种先进的容器集群管理系统，可以对容器化的应用程序进行自动化部署，伸缩和管理。

    9 个月前
  • 如何使用 Express.js 和 Google Analytics 跟踪网站流量

    随着互联网的快速发展，网站已经成为企业宣传和业务拓展的重要渠道之一。同时，网站的流量数据也成为了企业处理和优化的必要内容。 本文将介绍如何使用 Express.js 和 Google Analytic...

    9 个月前
  • ES7 中的 Unicode 标准化

    Unicode 是一种字符集，定义了世界上所有的字符，并为每个字符分配了一个唯一的代码点。在 JavaScript 中，字符通过 Unicode 内部编码来表示。ES7 引入了一些新的 Unicode...

    9 个月前
  • ESLint 常见错误及解决方法集锦，看完让你 error warning 不再畏惧

    前言 在前端开发中，ESLint 规范已经成为了标准。使用 ESLint 可以帮助开发者避免一些常见的代码错误，让代码更加规范、易读、易维护。但是，在实际使用过程中，我们还是可能遇到一些错误和警告，本...

    9 个月前
  • 从实战出发，深入理解 RESTful API OAuth2 身份认证

    介绍 现在的网络应用程序通常使用 RESTful API 来完成客户端和服务器之间的通信。OAuth2 则是一种常见的身份验证机制，用于保护用户信息和应用程序数据。

    9 个月前
  • 学习 ES8：ES8 模块化规范详解

    随着前端开发技术的发展，模块化已成为一个非常重要的概念。目前，我们常用的模块化规范有 CommonJS、AMD、UMD 等。随着 ES6 的发布，JavaScript 也开始支持原生的模块化语法，这个...

    9 个月前
  • LESS 常用语法介绍

    LESS 是一种动态样式表语言，是 CSS 的一种扩展，可以简化 CSS 的开发方式。它提供了许多功能，如变量、嵌套、混合等，这使得样式表的编写更加灵活和有效率。 变量 使用变量可以提高代码的可维护性...

    9 个月前
  • Material Design 设计规范中如何设置字体的大小及间距？

    Material Design 是 Google 提出的一套新的 UX/UI 设计规范。随着移动设备和响应式 Web 的普及，它成为了越来越多的前端设计师和开发者们使用的首选设计规范。

    9 个月前
  • 如何使用 Fastify 和 Elasticsearch 进行全文搜索

    随着信息量不断增加，如何快速有效地搜索相关信息是一件越来越重要的事情。在前端领域，全文搜索是一种常用的技术手段，它可以帮助用户快速地找到他们需要的信息。本文介绍了如何使用 Fastify 和 Elas...

    9 个月前

相关推荐

    暂无文章