GraphQL Server 使用教程完整版

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

GraphQL 是一种用于 API 的查询语言和运行时环境，最初由 Facebook 开发并在 2015 年公开发布。GraphQL 通过 API 定义类型和字段，然后允许客户端查询指定的字段，这使得客户和服务器之间的通信更加高效和灵活。

本文将介绍如何使用 GraphQL Server 构建一个 GraphQL API，包括 Schema、Resolvers 和 GraphQL Server。

一、搭建 GraphQL Server

首先，我们需要安装一些必要的软件：Node.js、NPM 和 GraphQL。

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

接下来，我们创建一个新的目录，初始化一个空的 Node.js 项目，然后安装两个必要的依赖项，分别是 Express 和 Express GraphQL：

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

然后，我们在该项目下创建一个新的 index.js 文件，用于构建并运行 GraphQL Server。

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

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

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

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

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

现在，我们可以通过下面的命令来启动 GraphQL Server 了：

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

访问 http://localhost:3000/graphql，你会看到 GraphiQL 界面，用于测试我们创建的 GraphQL API。在 query 窗口中输入以下查询语句并执行：

-
  -------
-

你会得到以下的响应：

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

二、使用 Schema 和 Resolvers

上面的例子非常简单，只有一个字符串类型的 message 字段。现在，让我们增加一些更现实的数据和字段来理解使用 Schema 和 Resolvers 的方法。

1. 定义 Schema

我们将创建一个图书管理系统，其中包含两个类型：Book 和 Author。定义如下：

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

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

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

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

上面的代码定义了两个类型：Book 和 Author，以及一个根查询类型 RootQuery，其中包含 book 和 author 两个字段。

2. 实现 Resolvers

现在，我们需要实现 Resolvers，以实现数据的获取和返回。

首先，我们需要定义一些书和作者的假数据：

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

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

然后，我们实现每个 Resolver 函数：

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

最后，我们将其添加到 RootQueryType 中：

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

现在，我们可以在 GraphiQL 中测试这些查询，例如：

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

响应：

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

响应：

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

三、使用 GraphQL Server

现在，我们已经创建了一个 GraphQL API，包括 Schema 和 Resolvers。然而，如果我们想要在 JavaScript 应用程序中使用它，我们需要一个 GraphQl 服务器。我们可以使用 express-graphql 创建一个服务器。

首先，我们需要在 index.js 中添加以下代码：

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

现在，我们就可以在浏览器或其他应用程序中使用 GraphQL API 了。

现在，我们把所有的代码放在一起，供你参考：

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

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

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

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

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

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

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

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

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

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

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

结论

本文讲述了如何使用 GraphQL Server 构建一个 GraphQL API，包括 Schema、Resolvers 和 GraphQL Server。借助 GraphQL，我们可以使客户端查询指定的数据，从而使客户端和服务器之间的通信更加高效和灵活。GraphQL Server 是使用 GraphQL 的基本要素之一，它可以让我们使用语言无关的方式构建并提供 GraphQL API。使用 GraphQL，我们可以更容易地设计和构建应用程序的数据模型，从而更加灵活地响应客户端的需求。

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

阅读全文

猜你喜欢

  • 如何优雅地使用 RxJs

    RxJs 是一个基于可观察数据流的编程库，它广泛应用于前端开发的状态管理、异步操作和响应式编程等方面。然而，由于 RxJs 的语言和概念比较抽象，初学者可能很难理解和应用它。

    16 天前
  • Next.js中客户端路由与服务端路由的区别与联系

    引言 随着互联网技术的发展，前端框架也在不断升级。Next.js 是一款基于 React 的服务端渲染应用框架，它可以方便地开发出在服务器上渲染 React 应用并且实现了 HMR (Hot Modu...

    16 天前
  • 如何利用 ES2020 创建维护的 JavaScript 应用程序

    如何利用 ES2020 创建维护的 JavaScript 应用程序 随着 JavaScript 不断发展，越来越多的开发者加入前端开发的行列。然而，当开发成为一个大型项目时，容易遇到代码维护的问题。

    16 天前
  • 效益 React 和 Redux 的数据管理

    React 和 Redux 是现代前端开发中非常流行的两个工具。React 用于构建用户界面，而 Redux 则是一个数据管理工具，用于管理应用程序中的状态。在这篇文章中，我们将学习如何使用 Reac...

    16 天前
  • Angular 项目中使用 TypeScript 的最佳实践

    在前端开发中，TypeScript 的流行度不断上升。它是一种 JavaScript 的超集语言，提供了类型系统、类、接口等语言特性，并且兼容了 JavaScript 的语法和代码库。

    16 天前
  • SASS 与 CSS 的区别及灵活使用

    什么是 SASS？ SASS 是一种 CSS 预处理器，提供了许多增强 CSS 的功能，如变量、嵌套、混合等。在编译后会生成标准的 CSS 文件，因此，SASS 可以视为一种扩展了 CSS 功能的语言...

    16 天前
  • 如何在 GraphQL 中处理上传文件的请求

    GraphQL与REST相比，在处理文件上传方面具有很大优势。GraphQL通过Multipart请求处理文件上传，可以上传多个文件，并且可以为每个文件添加元数据。

    16 天前
  • 比较 Deno 和 Node.js 的性能：基准测试和结果分析

    引言 Node.js 是前端开发者们广泛使用的一款 JavaScript 运行时环境，它也可以作为后端服务搭建平台。而 Deno 是近年来就开始崭露头角的一个新兴的 JavaScript 运行时环境，...

    16 天前
  • Kubernetes 中如何实现负载均衡

    介绍 负载均衡是现代Web应用程序特别是高流量应用程序的关键组成部分。作为一种流量调度技术，它可以将流量分配到多个可用的Web服务器上，从而使用户更高效地访问网站。

    16 天前
  • 快速掌握 Pipelines 的 ES7 提案

    简介 JavaScript 是广泛应用于前端开发的脚本语言，自语言问世以来 JavaScript 已经被不断迭代和完善，其中 ES7 提案中的 Pipelines 特性是一项值得前端开发者关注和学习的...

    16 天前
  • 如何使用 Enzyme 和 Jest 测试 React 组件

    在今天的前端开发中，测试是重要的一环。虽然可以选择使用不同的测试库，但在社区中，Jest 和 Enzyme 是最受欢迎的 React 测试工具。（注意：Jest 是 JavaScript 测试框架，E...

    16 天前
  • PC 端网站开发中如何优化响应式设计体验

    PC 端网站开发中如何优化响应式设计体验 作为现代 Web 开发的一项重要技术，响应式设计旨在实现页面在不同设备上的自动适应，为广大用户提供一致的浏览体验。在此基础上，开发者需要进一步考虑如何优化响应...

    16 天前
  • 建议你不要使用内联 Javascript

    建议你不要使用内联 Javascript Javascript 是一种强大而又灵活的编程语言，常常被用于前端开发中。在网页开发的时候，我们经常需要使用 Javascript 来处理用户和网页交互。

    16 天前
  • Android 无障碍服务如何监测应用状态改变

    在 Android 应用中，我们经常需要监测应用状态，例如应用的启动、停止、界面切换等等。这些状态变化通常会触发我们的一些业务逻辑，但是如何准确地监测这些状态变化却是一个挑战。

    16 天前
  • 如何在 Deno 中使用 Redis 作为缓存

    随着现代 web 应用程序的复杂性增加，缓存机制的重要性也越来越突出。Redis 是一种支持多种数据结构的开源内存数据存储，可以用作缓存，持久性存储和消息代理等用途。

    16 天前
  • Material Design 和 Flat Design 的区别与联系

    介绍 Flat Design 和 Material Design 都是现代 UI 设计中最流行的两种设计风格。Flat Design 是从微软公司的 Metro UI Design 风格中发展而来的，...

    16 天前
  • 在 Jest 中设置全局变量

    在前端开发中，我们经常会用到 Jest 来进行单元测试。但有时候我们需要将某个全局变量替换为另一个变量，比如将 axios 替换为 axios-mock-adapter。

    16 天前
  • 从 WebSocket 到 Server-Sent Events：前端实现实时通信的完整流程

    随着 Web 应用的不断发展，实时通信已经成为了一个核心需求。WebSockets 和 Server-Sent Events（SSE）已成为实现这一目标的两种流行技术。

    16 天前
  • Headless CMS 在 React 应用程序中的使用指南

    随着现代 Web 应用程序的流行，前端开发者需要更多的灵活性，因此 Headless CMS 成为了现代开发的必备工具之一。它可以让我们从后端数据源中获得内容，而不必为每个应用程序构建它们自己的 CM...

    16 天前
  • 使用 Enzyme 进行 React 组件测试的简单方法

    在前端开发中，React 组件测试是非常重要的一项任务。但是，测试代码编写的繁琐和复杂度高，常常使人望而却步。幸运的是，Enzyme 可以使这项任务变得更加容易。 Enzyme 是一个 React 组...

    16 天前

相关推荐

    暂无文章