从零开始创建 GraphQL 服务器教程

GraphQL 是一种由 Facebook 开发的新型 API 查询语言和运行时环境,旨在改善现有 RESTful API 的局限性,提高开发效率和数据交互的灵活性。在这篇文章中,我们将深入了解 GraphQL 的概念和用法,从零开始创建一个 GraphQL 服务器,并编写示例代码来说明如何使用它。

什么是 GraphQL?

GraphQL 是一种请求数据的方式,可以从服务器端按需准确地获取所需的数据。它通过单一的端点定义了前端需要的所有数据,相较于传统的 RESTful API 更加灵活和可扩展,并能够有效地控制数据的大小和性质。同时,GraphQL 还提供了丰富的类型和查询语言,能够支持各种数据结构和操作,比如查询、修改、删除等等。总的来说,GraphQL 是一种更加优雅、高效和可靠的数据查询语言。

创建 GraphQL 服务器的步骤

1. 安装依赖

首先,我们需要在电脑上安装 Node.js 和一些 GraphQL 的相关依赖。您可以下载最新版本的 Node.js 并通过 npm 安装以下依赖:

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

其中,graphql 是 GraphQL 的核心库,express 是 Node.js 服务器框架,express-graphql 是 GraphQL 在 express 中的中间件。

2. 构建 Schema

GraphQL 的核心是基于类型构建的查询语言,而所有的类型都需要在一个 Schema 中被定义。Schema 描述了我们的 API 的功能和数据模型,定义了如何查询和修改数据及其返回值。在我们开始编写 Schema 之前,让我们先引入我们的几个模型:

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

这里我们引入了 GraphQL 的类型和 Schema 相关的一些对象,这些对象通常会在 Schema 的构建中使用。然后,我们先定义一个 Message 类型:

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

在这里,我们定义了一个 MessageType,它包含了一个 id 和一个 text,这些属性将会在我们的前端查询时被返回。接下来,我们可以定义我们的 RootQuery,这是我们的 Schema 的核心类型:

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

这里我们定义了一个名为 message 的 Query,它返回一个 MessageType。它还接受一个参数 id,表示我们想查询哪个 id 的消息。在 resolve 函数中,我们可以写查询数据库或从其他源获取数据的代码。现在我们的 Schema 已经完成,让我们将其打包到一个 Schema 实例中:

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

3. 编写 Resolver

Resolver 是执行 Query 中定义的函数,它们通常包含了从数据库或其他源获取数据的逻辑。在我们的例子中,我们编写一个简单的 resolver 函数,它返回所有消息。

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

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

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

首先我们定义了一个包含两条消息的数组,然后编写了一个获取所有消息的函数 getMessages(),最后创建了一个名称为 messages 的查询根(也就是 resolver 中的 root)。接下来,我们需要将它们添加到 Server 中,让它们能够被执行。

4. 构建 GraphQL Server

最后一个步骤就是将 GraphQL Server 添加到 express 中。我们需要将 GraphQL Server 作为一个中间件添加到我们的服务器中。我们需要定义一个路径 (/graphql) 挂载 GraphQL,以及一个可选的执行方法。代码如下所示:

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

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

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

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

在这里,我们设置了一个 graphiql 参数,它允许我们在浏览器中进行交互式的 GraphQL 查询和测试。现在开启服务,我们就可以在浏览器的 http://localhost:5000/graphql 中看到 GraphQL 的 Playground 工具了。其中,左侧是 GraphiQL 功能区,我们可以在此输入 GraphQL 语句,右侧是结果窗口,我们可以看到我们所请求的数据。

示例代码

下面是一个完整的示例代码,它演示了如何创建一个 GraphQL Server。您可以将其复制到文件中并在本地运行。

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

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

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

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

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

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

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

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

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

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

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

总结

在本文中,我们介绍了 GraphQL 的概念、优点和用法。我们也演示了如何使用 Node.js 和 express 加上 GraphQL 来创建一个服务器。我们通过一个示例代码,演示了如何构建和调用一个 GraphQL 服务器。相信了解了本篇文章,您可以更好的理解 GraphQL 的工作原理,从而加强对它的实际应用。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/647dde3a968c7c53b08adc77


猜你喜欢

  • 利用 CUDA 技术提高深度学习程序性能

    深度学习在近年来被广泛应用于计算机视觉、自然语言处理、推荐系统等领域,并在不断推动人工智能技术的发展。然而,随着深度学习模型的增大和复杂性的提高,其运行所需的计算资源也越来越多,这限制了深度学习应用的...

    1 年前
  • React 中的 CSS-in-JS 方案比较及使用技巧

    前端开发过程中,CSS 是重要的一步,而在 React 生态中,CSS-in-JS 方案成为了一个值得重视的选项,它将 CSS 与 JS 集成在一起,使得样式编写更加便利和灵活。

    1 年前
  • 如何使用 Headless CMS 构建移动应用程序?

    什么是 Headless CMS? Headless CMS 是相对传统(monolithic) CMS 的一种新型 CMS 架构,其主要核心思想是将内容存储与内容的展示与交互分离开来。

    1 年前
  • CSS Grid 精讲(1):流式与自适应布局

    前言 Web 开发的一个核心问题是布局,而 CSS Grid 是一种非常强大的布局技术,它提供了简单、灵活、响应式的布局方式。在本系列文章中,我们将深入探究 CSS Grid 的各种用法和技巧,帮助你...

    1 年前
  • 如何使用 CSS Reset 处理自适应图片的缩放问题

    在我们开发前端网页时,一般会用到大量的图片来增加网页的美观度和吸引力。为了使图片在不同设备上的显示效果更为优秀,我们通常采用自适应图片的方式进行处理。但是自适应图片往往会出现缩放问题,我们常常需要借助...

    1 年前
  • 使用 ES8 的 Object.seal() 方法实现对象封装

    引言 在前端开发中,封装对象是一种非常有用的实践,它可以帮助我们降低系统复杂度、提高代码的可维护性。在 JavaScript 中,我们可以使用 Object.seal() 方法轻松地实现对象的封装,让...

    1 年前
  • 学习使用 Custom Elements 来构建可复用 Web 组件教程

    简介 Web 组件是一种构建 Web 应用程序的基本构建块。它们是可复用,封装和自包含的,可以轻松地在 Web 应用程序中重复使用。Web 组件可以用于创建 UI 控件,小部件,图表,表格等。

    1 年前
  • Redis 相关数据结构的应用及原理

    前言 在前端开发中,Redis 作为一款高性能、内存型的 NoSQL 数据库,被广泛应用于缓存、会话管理、计数器等方面。Redis 的数据结构非常丰富,包括字符串、哈希表、列表、集合、有序集合等,本文...

    1 年前
  • 如何在 Hapi 应用程序中使用 Redis

    Redis 是一个开源的内存数据结构存储系统,可以用于缓存、消息传递、任务队列等场景。在 Hapi 应用程序中使用 Redis 可以提高应用程序的性能和可扩展性。本文将详细介绍如何在 Hapi 应用程...

    1 年前
  • 在 GraphQL 中使用 Prismic CMS

    在现代的 Web 开发中,无论是前端还是后端都离不开各种内容管理系统(CMS)。Prismic CMS 是一种基于云服务的 CMS,它的特点是轻量、易上手、具有良好的扩展性,因此受到越来越多的开发者们...

    1 年前
  • Web Components 中使用 Immutable.js 来管理状态

    在当前 Web 技术的发展前景下,Web Components技术是一个越来越值得关注的前端技术。作为开发者,我们需要关注如何优化 Web Components 的性能和维护程度,其中状态管理是至关重...

    1 年前
  • PWA 技术升级指南:Service Worker 于 Background Sync

    前言 PWA(Progressive Web App)在前端应用中正变得越来越流行。它能够为前端应用提供与原生移动应用一样的用户体验,包括离线使用、推送通知等功能。

    1 年前
  • 深入理解 ES9 的对象 rest 和 spread

    在 ES9 中,为了更方便地处理 JavaScript 对象,新增了对象 Rest 和 Spread 功能。这些功能不仅可以让开发者更方便地处理对象,还可以提高开发效率和代码可读性。

    1 年前
  • 如何使用 Postman 测试 Express.js 应用程序

    在开发前端应用程序时,经常需要与后端进行数据交互。而在进行数据交互时,我们需要测试后端 API 是否能够按照预期工作。Postman 是一款强大的 API 测试工具,可以帮助我们非常容易地测试后端 A...

    1 年前
  • 如何在 Deno 中使用 x509 证书进行客户端认证?

    在网络通信中,客户端认证是一种常见的安全机制。它可以确保客户端的身份得到验证,从而防止恶意主体伪造身份。在这篇文章中,我们将介绍如何在 Deno 中使用 x509 证书进行客户端认证。

    1 年前
  • 解决 JavaScript 应用程序中的常见 ES11 错误

    在编写和维护 JavaScript 应用程序时,我们都会遇到各种错误,这些错误有时会很棘手,需要花费大量时间来调试和解决。ES11(或 ECMAScript2020)是 JavaScript 的最新版...

    1 年前
  • Chai.js 如何与 NightWatch 一起使用

    本文将介绍如何在前端测试框架 NightWatch 中使用 Chai.js 断言库,帮助你更方便地进行前端自动化测试。 Chai.js 简介 Chai.js 是一个流行的 JavaScript 断言库...

    1 年前
  • Babel 编译 ES7 新特性时可能遇到的问题与解决方法

    前言 随着 ECMAScript 新标准的不断更新,前端开发人员对于新特性的需求也越来越高。然而新特性并不总是能够被所有浏览器所支持,这时就需要使用编译工具进行转换。

    1 年前
  • 深入浅出 React Router 4

    React Router 是一个开源的 React 页面路由库,它提供了强大而灵活的组件,可以帮助我们在 React 应用程序中实现导航和页面跳转。 在 React Router 4 版本中,它有着完...

    1 年前
  • # 常见的 8 个 JavaScript bug 和如何解决它们

    常见的 8 个 JavaScript bug 和如何解决它们 JavaScript 是一种非常流行的编程语言,但它也有一些常见的 bug,这些 bug 可以让开发者头疼不已。

    1 年前

相关推荐

    暂无文章