使用 Fastify 构建 GraphQL API 的完整教程

面试官：小伙子，你的代码为什么这么丝滑？

GraphQL 是一种由 Facebook 发明的数据查询语言，它可以让客户端定义需要返回哪些数据，并且不会浪费带宽和服务器资源。Fastify 是一个低开销且高度效率的 Node.js web 框架。这篇文章将向你介绍如何使用 Fastify 构建一个 GraphQL API 服务。

准备工作

在开始之前，我们需要安装 Node.js 和 npm（或 yarn）。你可以通过以下链接下载和安装它们：

创建一个新的空目录，并在其中打开命令行终端。初始化该目录并安装必需的依赖：

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

编写 API

首先，让我们创建一个 index.js 文件，并从导入 Fastify 和 Fastify 插件开始：

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

然后，自动加载多个路由和插件：

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

在目录 ./routes 中，我们可以创建一个名为 graphql.js 的文件。该文件将包含我们 GraphQL API 的所有定义：

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

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

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

在该文件中，我们注册了 Fastify CORS 插件以解决跨域问题。然后，我们使用 fastify-gql 插件创建 GraphQL API。最后，我们定义 /graphql 路由的处理程序，该处理程序将处理所有的 GraphQL 操作。

在接下来的部分中，我们将更详细地讨论 schema 对象，并提供一个完整的代码示例。

定义 schema

一个 GraphQL schema 定义了可以从 API 中获取的所有数据类型、查询、变异、订阅等。以下是一个简单的例子：

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

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

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

在这个示例中，我们定义了一个名为 Query 的类型，其中包含一个名为 hello 的字段，其类型为 String。

在实际项目中，我们通常会定义许多其他类型，例如 “User”、“Product”、“Order” 等等。这种复杂的类型定义可能需要使用 makeExecutableSchema 函数，该函数允许我们传递一个包含类型定义和一个可选的解析器对象的 JavaScript 对象。

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

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

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

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

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

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

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

在这个示例中，我们定义了三个类型：User、Query 和 Mutation。我们还提供了类型解析器的对象，该对象定义了这些类型的实际行为。例如，user 查询实际上应该查询数据库并返回一个用户对象。

编写解析器

我们在上一节中定义了一个 schema，但 schema 并不能充分发挥作用，因为 GraphQL 的类型解析器还没实现。在解析器中，我们需要定义每个 GraphQL 映射到的函数。

以查询 allUsers 为例。我们的 schema 如下：

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

我们需要添加该查询的解析器：

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

该解析器使用一个名为 db 的属性，它将连接到作为上下文传递的数据库。反过来，我们可以使用它来查询数据库并返回所需的数据。

完整的示例代码

以下是完整的代码示例：

index.js

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

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

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

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

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

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

./routes/graphql.js

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

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

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

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

-

./schema.js

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

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

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

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

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

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

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

结论

在本教程中，我们使用 Fastify 构建了一个 GraphQL API，并解释了如何使用 Fastify 的自动加载插件、CORS 插件和 GraphQL 插件来构建一个完整的 API 服务。我们还讨论了如何定义 GraphQL schema 和解析器，并提供了一个完整的示例代码。

尽管 GraphQL 只是近期出现的技术，但它已经广泛使用了，特别是在 React 和 Vue.js 等前端框架中。如果你正在寻找一种优秀的数据查询语言，那么 GraphQL 是一个很好的选择！

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

阅读全文

猜你喜欢

  • MongoDB 简单模糊查询实现

    在 MongoDB 中，模糊匹配是一项常见的查询操作。 在本文中，我们将学习有关如何使用 MongoDB 进行简单模糊查询的知识。 什么是 MongoDB？ MongoDB 是一款 NoSQL 数据库...

    7 天前
  • 使用 React.js 构建适用于移动设备的 SPA 的最佳实践

    React.js 是一个非常流行的 JavaScript 库，用于构建富交互性的 Web 应用程序。它是一个组件化框架，使得前端开发人员能够有效地构建可重用的 UI 组件。

    7 天前
  • Tailwind CSS 2.0 出现的新问题及其解决方法

    近期，Tailwind CSS 2.0 发布了，众所周知，Tailwind CSS 是一个目前非常受欢迎的，以 utility-first 的方式实现的 CSS 框架，它可以大大减少前端开发的时间和成...

    7 天前
  • 响应式设计中如何实现页面模块化管理

    随着移动设备的普及和使用场景的多样化，响应式设计已经成为了前端开发中的标配。在响应式设计中，页面的元素和布局要能够根据不同设备的屏幕尺寸、分辨率等参数自适应调整。 在实现响应式设计的同时，一个好的页面...

    7 天前
  • Material Design 中实现折叠式 NavigationDrawer

    在 Material Design 中，NavigationDrawer 是一个非常重要的组件，它允许用户在应用程序中导航到不同的区域。为了更好地适应不同大小的屏幕，Google 在 Material...

    7 天前
  • ES7 新特性之强化数组的方法 Array#includes()

    JavaScript 是目前最热门、最广泛使用的编程语言之一，而它的标准 ECMAScript 也在不断地被更新。ES7(2016)引入了很多新特性，其中也包括了强化数组的方法 Array#inclu...

    7 天前
  • 使用 LESS 实现响应式布局注意事项

    响应式布局是我们日常前端开发中经常需要用到的技术。它可以使我们的网页在不同的屏幕尺寸下都得到很好的展示效果。在实现响应式布局的过程中，LESS 是一个非常好用的辅助工具。

    7 天前
  • CSS Reset 对渐变表现的影响

    CSS Reset 是前端开发中常用的一种技术，它的作用是将所有 HTML 元素的默认样式都统一，并清除掉浏览器自带的样式，以实现更好的自定义效果。但是，CSS Reset 对于渐变这样的样式效果会产...

    7 天前
  • 如何解决 Cypress 运行测试用例遇到 localStorage.getItem 未定义的报错

    Cypress 是一种前端自动化测试工具，它允许开发人员编写和运行各种单元测试、集成测试和端到端测试。Cypress 很容易上手，但在测试用例编写过程中，可能会遇到一些问题，例如 Cypress 运行...

    7 天前
  • Headless CMS 如何应对多渠道内容管理的挑战？

    什么是 Headless CMS Headless CMS 是指将内容管理系统 (Content Management System，简称 CMS) 的头部 (Head) 和身体 (Body) 分离，...

    7 天前
  • 如何在 GraphQL 中使用 Websocket？

    GraphQL 是一种用于 API 的查询语言，其具有明确定义的类型系统，使得数据查询变得更加高效与可靠。而 Websocket 是一种实现了双向通信的协议，能够在服务器和客户端之间建立长连接，为实时...

    7 天前
  • 如何使用 Vue.js 构建具有实时通信功能的 SPA？

    现在越来越多的单页应用程序(SPA)需要实时通信功能来与后端通信，这种情况下，Vue.js作为现代的前端框架可以帮助我们快速地构建具有实时通信功能的SPA。这篇文章将介绍如何使用Vue.js来实现这个...

    7 天前
  • Tailwind CSS 常见的浏览器兼容性问题

    Tailwind CSS 是一种快速、高效的 CSS 框架，可以节省前端开发人员的时间，让他们更加专注于业务逻辑的实现。但是随着 Tailwind CSS 的使用越来越广泛，一些浏览器兼容性问题也逐渐...

    7 天前
  • Node.js 中使用 Nginx 进行反向代理的方法和技巧

    什么是反向代理？ 在计算机网络中，代理是一种充当客户端和服务器之间媒介的服务器或软件。它们可以帮助客户端隐藏真实 IP 地址或加速网络访问速度等功能。常见的代理有常规代理和反向代理两种类型。

    7 天前
  • 利用 React Native 和 Redux 构建易于维护的应用

    背景 在当今社会，移动应用的需求越来越多，而移动应用的开发也越来越被重视，尤其是在前端开发领域。然而，随着应用的不断迭代，其复杂度会逐渐增加，因此维护一个良好的应用变得至关重要。

    7 天前
  • 解决响应式设计中的按钮样式不统一问题

    在响应式设计中，按钮是网页中不可或缺的元素之一。然而，按钮样式的不统一性常常会给网页设计带来不便，特别是对于交互性较强的页面。 在本文中，我们将讨论如何解决响应式设计中的按钮样式不统一问题，从而提高网...

    7 天前
  • 让 Serverless 应用更可靠：实例故障检测技术分析

    Serverless架构可以让开发人员专注于编写代码，而不是操作系统或者框架的设置等操作。AWS Lambda和Azure Function是当前Serverless架构中比较流行的解决方案。

    8 天前
  • RESTful API 中的 URL 版本控制

    RESTful API 是现代 Web 应用程序的基础。在开发过程中，经常需要对 API 进行更新。通常情况下，我们需要使用版本控制来保持 API 的稳定性并降低开发的复杂度。

    8 天前
  • 在 Next.js 项目中添加 Google reCAPTCHA 的详细步骤

    随着网络攻击愈发普遍，网站需要提高安全性以保护用户隐私和数据安全。为此，添加 Google reCAPTCHA 是实现防止机器人滥用网站的有效方法。如果您正在使用 Next.js，那么在添加 Goog...

    8 天前
  • Custom Elements 中自定义事件的传参方式详解

    在前端开发中，我们经常需要自定义事件来完成特定的业务逻辑。Web Components 是一种创建自定义元素和使用它们的新技术，它提供了 Custom Elements API，使得我们可以创建自定义...

    8 天前

相关推荐

    暂无文章