如何利用 Apollo Server 和 GraphQL 创建可扩展的 API

面试官：小伙子，你的数组去重方式惊艳到我了

在现代 web 开发中，API 扮演着至关重要的角色，而 GraphQL 和 Apollo Server 能够帮助我们快速构建高度可扩展、可定制、可维护的 API。在本文中，我们将详细介绍如何使用 Apollo Server 和 GraphQL 创建可扩展的 API，并提供有深度的学习和指导意义。

GraphQL 简介

GraphQL 是一种查询语言，用于编写 API 查询和操作的语言。相较于传统的 RESTful API，GraphQL 允许客户端指定返回的数据字段、关联数据和数据结构，从而提供更加灵活和精细的数据获取能力。由于 GraphQL 与前端和后端的解耦，因此具有很高的可扩展性和灵活性。

GraphQL 由 Facebook 开发并开源，目前已成为一个独立的标准并得到广泛应用。在使用 GraphQL 前，你需要了解 GraphQL 的相关知识：

  • GraphQL 查询语言：包括查询、变量、输入类型、查询别名、操作名称等。
  • GraphQL Schema：GraphQL Schema 描述了服务器的可查询类型、可变更类型、查询和变更的输入参数等信息。
  • GraphQL 操作：GraphQL 操作包括查询、变更、订阅等。

Apollo Server 简介

Apollo Server 是一个用于构建 GraphQL API 的开源库。它提供了可扩展、高度定制和易于使用的 API 服务框架，可以与 Node.js、Express、Koa、Lambda 等常见 Node.js 框架无缝集成。

使用 Apollo Server 构建 GraphQL API，需要进行以下步骤：

  1. 定义 GraphQL Schema。
  2. 实现 Schema 中的 Resolver 函数。
  3. 构建 Apollo Server 并将 Schema 和 Resolver 函数传入。

以下是一个使用 Apollo Server 构建最简单的 Hello World GraphQL API 的示例代码：

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

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

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

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

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

如何创建可扩展的 GraphQL API

  1. 定义清晰的 GraphQL Schema

创建一个清晰的 GraphQL Schema 是创建可扩展的 GraphQL API 的关键。一个好的 Schema 应该是精细、清晰、易于维护的，要考虑数据模型和业务逻辑，包括可查询类型、可变更类型、输入类型、枚举类型、联合类型等。Schema 中应该准确定义类型之间的关系和字段之间的关系，并尽可能地避免查询或变更的冗余或不必要的复杂性。

以下是一个清晰的 Schema 的示例代码：

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

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

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

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

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

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

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

  ---- -------- -
    ----------------- ------------ -----
    -------------- ---- ------ ------------ -----
    -------------- ----- ---
    ----------------- ------------ -----
    -------------- ---- ------ ------------ -----
    -------------- ----- ---
  -
--
  1. 优化数据查询

GraphQL 具有非常强大的查询能力，然而不得不承认的是，一个错误的查询可以对服务器性能造成很大的影响。优化数据查询的目的是提高查询效率和扩展性，减少资源占用。

以下是一些优化数据查询的建议：

  • 只请求需要的数据：使用 GraphQL 的查询别名和查询的作用域进行精细控制，只获取客户端请求的数据字段。
  • 合并查询：使用 GraphQL 的 alias 和 fragment 可以方便地合并多个查询，从而减少请求数量。
  • 使用 DataLoader：DataLoader 是一个数据缓存和批处理工具，可以有效地减少重复查询和数据越权查询的问题。
  1. 实现 GraphQL Resolver

GraphQL Resolver 是一个非常关键的组件，它用于处理前端发起的 GraphQL 请求。有了业务逻辑和数据操作，我们就可以写出适当的 Resolver 函数，这将使代码逻辑更加清晰明了，并提高代码的可维护性。

以下是 Resolver 函数的示例代码：

----- --------- - -
  ------ -
    ------ ----- ------ ----- -------- -- -
      ----- ----- - ----- -------------------------
      ------ ------
    --
    ----- ----- ------ - -- -- -------- -- -
      ----- ---- - ----- -----------------------------
      ------ -----
    --
    ------ ----- ------ - --------- -------- --------------- ------ ------ -- -------- -- -
      ----- ----- - ----- ---------------------- -------- -- ----- -
        ----- - ---------- -------------- --- ----- - - - -- --
        ------
        ----- -------
      ---
      ------ ------
    --
    ----- ----- ------ - -- -- -------- -- -
      ----- ---- - ----- ------------------------------------------------
      ------ -----
    --
  --
  --------- -
    ----------- ----- ------ - ----- -- -------- -- -
      ----- ---- - ----- ------------------------------
      ------ -----
    --
    ----------- ----- ------ - --- ----- -- -------- -- -
      ----- ---- - ----- ------------------------------------- ------ - ---- ---- ---
      ------ -----
    --
    ----------- ----- ------ - -- -- -------- -- -
      ----- --------------------------------------
      ------ ---
    --
    ----------- ----- ------ - ----- -- -------- -- -
      ----- ---- - ----- ------------------------------
      ------ -----
    --
    ----------- ----- ------ - --- ----- -- -------- -- -
      ----- ---- - ----- ------------------------------------- ------ - ---- ---- ---
      ------ -----
    --
    ----------- ----- ------ - -- -- -------- -- -
      ----- --------------------------------------
      ------ ---
    --
  --
--
  1. 使用 DataLoader 进行查询优化

为了避免过多的查询，我们可以使用 DataLoader 来缓存已查询的数据。DataLoader 是一个 JavaScript 库，用于对加载和查询多个数据源的数据进行缓存和批处理。对于复杂的查询场景，它可以显著提高查询效率，并降低服务器负载。使用 DataLoader，需要先安装并导入该库进入项目。

以下是一个使用 DataLoader 进行数据查询的示例代码：

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

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

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

----- --------- - -
  ------ -
    ----- ----- ------ - -- -- -------- -- -
      ----- ---- - ----- --------------------
      ------ -----
    --
    ----- ----- ------ - -- -- -------- -- -
      ----- ---- - ----- --------------------
      ------ -----
    --
  --
  ----- -
    ------- ----- ------ ----- -------- -- -
      ----- ---- - ----- ------------------------------------------
      ------ -----
    --
  --
--
  1. 添加分页和过滤器

分页和过滤器是大多数查询 API 中必须要处理的问题。我们可以通过 GraphQL 中的参数来支持分页和过滤器。通常，我们会使用 limit 和 offset 实现分页，使用 where 子句中的 $in、$nin、$ne、$lt、$lte、$gt 和 $gte 操作符实现过滤器。

以下是一个具有分页和过滤器支持的 GraphQL API 示例代码：

----- --------- - -
  ------ -
    ------ ----- ------ - ----- - --- ------ - -- ------ - -- -- -------- -- -
      ----- ----- - ----- ---------------------------- ----- -
        ----- - ---------- -- --
        ----- -------
        ------
      ---
      ------ ------
    --
    ------ ----- ------ - ----- - --- ------ - -- ------ - -- -- -------- -- -
      ----- ----- - ----- ---------------------------- ----- -
        ----- - ---------- -- --
        ----- -------
        ------
      ----------------------
      ------ ------
    --
  --
--
  1. 添加 GraphQL Subscriptions

与传统的 RESTful API 不同的是，GraphQL 支持实时数据订阅和推送，这是一个新颖的功能。GraphQL Subscriptions 可以使客户端在不刷新页面的情况下实时接收服务器端的数据更新。对于实时通信和协作应用非常有用。

以下是一个支持 GraphQL Subscriptions 的 GraphQL API 示例代码：

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

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

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

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

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

总结

在本文中，我们探讨了如何使用 Apollo Server 和 GraphQL 创建可扩展的 API，并提供了详细的示例代码。我们强调了定义清晰的 GraphQL Schema、优化数据查询、实现 GraphQL Resolver、使用 DataLoader 进行查询优化、添加分页和过滤器和添加 GraphQL Subscriptions 等关键步骤。在现代 web 开发中，GraphQL 和 Apollo Server 已成为创建高度定制、可扩展、灵活且易于维护的 API 的优秀选择。

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

阅读全文

猜你喜欢

  • 如何在 Express.js 中使用 JWT 进行身份验证？

    随着互联网及移动互联网的快速发展，越来越多的应用程序需要进行用户身份验证及管理。为了满足这些需求，使用 JSON Web Token（JWT）进行用户身份验证已经成为技术领域的常见做法。

    3 小时前
  • 在 GraphQL 中处理复杂的对象关系

    在现代的 web 应用中，对象之间的关系变得越来越复杂。例如，一个出售商品的商店可能会有许多不同的商品，其中每个商品可能会有多个大小、颜色、类型等变体。在以前，为了处理这种情况，我们需要在后端编写各种...

    3 小时前
  • 如何使用 Jest 测试 Node.js 应用？

    Jest 是一款由 Facebook 开发的开源 JavaScript 测试框架。它被广泛用于前端和 Node.js 应用程序的单元测试、集成测试和端到端测试。在本篇文章中，我们将学习如何使用 Jes...

    3 小时前
  • Android 开发中 Material Design 中 TabLayout 的使用技巧

    前言 随着移动互联网的快速发展，在 Android 开发中，Material Design 成为了最流行的设计指南之一。TabLayout 是 Material Design 中一个重要的组件，具有良...

    3 小时前
  • PM2 与 NGINX：构建高性能的 Node.js 应用程序

    Node.js 是一个快速而又高效的 JavaScript 运行环境，正因为如此，它已经成为了构建 Web 应用、REST API 和实时应用的理想选择。但随着 Node.js 应用程序的愈加复杂，它...

    3 小时前
  • Headless CMS 中使用 Webhooks 实现自动构建

    随着静态网页生成器的流行，Headless CMS 越来越受到开发者们的重视。Headless CMS 不仅提供了现代化的管理界面，还允许开发者通过 API 或 Webhooks 来获取内容。

    3 小时前
  • ES10 实战教程

    前言 ES10，也就是 ECMAScript 2019，是 JavaScript 的最新版本。自 2015 年发布了 ES6 以来，JavaScript 变得越来越流行，并且在近几年里，前端技术发展迅...

    3 小时前
  • Serverless 如何实现自动备份？

    在 Serverless 架构中，由于无需维护服务器，开发者可以更专注于实现业务逻辑。但是，我们还是需要解决一些重要问题，如数据备份、数据恢复和灾难恢复等。在本文中，我们将探讨如何使用 Serverl...

    3 小时前
  • Jest 测试 React 组件中使用 context 的方法探究

    在 React 应用中，我们可能需要在组件间共享一些数据或者函数，这时可以通过 Context 来实现。但是在测试使用 Context 的组件时，我们可能会遇到一些问题。

    3 小时前
  • SSE 如何设置头信息？

    简介 SSE（Server-Sent Events）是一种轻量级的实时推送技术，在前端开发中经常用于推送服务器实时消息，比如聊天、订阅等。SSE 可以通过 HTTP 协议进行传输，因此需要设置合适的头...

    3 小时前
  • 在 Docker 容器中使用 SSH

    随着前端应用程序的复杂性增加，开发环境的设置变得越来越麻烦。 Docker 是一个流行的容器化解决方案，它可以帮助我们在标准化的环境中进行开发。在这篇文章中，我们将学习如何在 Docker 容器中使用...

    3 小时前
  • CSS Grid 游戏（Grid Garden）学习笔记

    CSS Grid 游戏（Grid Garden）学习笔记 CSS Grid 是一个强大的布局工具，它可以让我们轻松地实现复杂的网页布局。但是，学习 CSS Grid 的过程可能会有些枯燥。

    3 小时前
  • React 中使用 setInterval 时的注意事项

    引言 在 React 中，我们很常见地使用 setInterval 来创建周期性的任务。在实际开发中，我们需要注意一些细节和陷阱，以确保周期性任务能够正确地运行。本文将会介绍 React 中使用 se...

    3 小时前
  • 如何在使用 CSS Reset 的情况下保持 flexbox 布局？

    什么是 CSS Reset？ 在我们开始探讨在使用 CSS Reset 的情况下保持 flexbox 布局之前，我们需要先了解什么是 CSS Reset。CSS Reset 是一种用于归零不同浏览器之...

    3 小时前
  • 使用 Web Components 构建可重用的模态框组件

    Web Components 是 Web 技术的一种新型组成部分，可以让开发者创建封装的自定义元素。通过 Web Components，开发者可以更加轻松地构建可重用的 UI 组件。

    3 小时前
  • 如何优化 iOS 应用程序的性能

    作为一名前端开发人员，我们常常需要优化我们的应用程序的性能，以提供更好的用户体验。在 iOS 平台上，优化应用程序的性能尤为重要。本文将介绍一些优化 iOS 应用程序性能的技巧和策略，帮助开发人员提高...

    3 小时前
  • 响应式设计中的样式调整

    随着移动设备的普及，人们越来越多地使用手机和平板电脑浏览网站。因此，响应式设计已成为现代 Web 设计的必要趋势。在响应式设计中，我们需要针对不同的设备大小和屏幕分辨率，调整样式和布局以确保网站能够良...

    3 小时前
  • 在 Fastify 中处理文件上传

    Fastify 是一个快速、低开销和易于学习的 Web 框架，其性能排名领先。在开发过程中，我们经常需要处理文件上传。本文将介绍如何在 Fastify 中处理文件上传。

    3 小时前
  • ES11 中的 Object.fromEntries() - 一个实用工具

    ES11 中的 Object.fromEntries() - 一个实用工具 在 ES2019 中，一个新的 Object 静态方法 fromEntries() 加入了 JavaScript。

    3 小时前
  • 如何用良好的界面设计提升 App 无障碍性？

    随着技术的不断进步和社会的不断发展，越来越多的人开始重视无障碍性设计，这样有助于让更多的人都能够顺利、愉快地使用各种应用程序。尤其是在移动应用程序中，良好的界面设计不仅可以提高用户的使用体验，还可以提...

    3 小时前

相关推荐