使用 GraphQL 实现 RESTful API 的 CRUD 操作

前言

RESTful API 是目前开发 Web 应用程序时最常用的 API 架构。虽然它非常流行，但它的缺点也很明显，其中最大的问题就是当需要多次请求才能从服务器获取所需的信息时，会造成网络延迟和性能问题。

GraphQL 是一种新型的 API 架构，它提供了比 RESTful API 更为高效的方式来获取所需的信息。GraphQL 具有很多优点，最大的优势是能够减少网络请求次数，从而提高性能和减少延迟。

本文将介绍如何使用 GraphQL 实现 RESTful API 的 CRUD 操作，包含详细的内容和示例代码。希望能够帮助读者了解 GraphQL，并且在日常工作中使用 GraphQL 来解决问题。

什么是 GraphQL

GraphQL 是由 Facebook 开发的一种 API 架构，它允许客户端指定需要获取的数据，并且能够将多个请求合并成一个请求。GraphQL 与 RESTful API 相比，最大的不同点在于客户端指定所需的数据，而不是从服务器获取所有数据。

GraphQL 的数据模型是一张图，所有的数据都是基于这张图构建的。每个节点都对应一个类型，每个类型都有一组字段，这些字段可以是标量类型（如字符串、数字等），也可以是另一个类型。客户端可以通过 GraphQL 查询指定需要的字段，而不必获取整张图所包含的所有字段。

GraphQL 还支持以便捷的方式进行数据添加、修改和删除。因此，它被广泛地应用于开发 Web 应用程序和移动应用程序。

GraphQL 的优点

GraphQL 相比于 RESTful API 具有很多优点，主要有以下几点：

1. 查询灵活

GraphQL 允许客户端指定需要获取的数据，而不是从服务器获取所有数据。客户端可以自由组合所需要的字段，从而充分利用网络带宽。这相比于 RESTful API 需要多次请求获取所需数据，显得更加高效和灵活。

2. 强类型

GraphQL 是一种强类型语言，它的类型系统非常严格。通过 GraphQL 查询时，客户端必须指定要获取的字段以及字段所对应的类型。这个过程是通过定义 GraphQL Schema 来完成的，这样可以在编译时发现类型问题，显得更加安全。

3. 多端交互

GraphQL 适用于多种客户端，包括 Web 应用程序、移动应用程序和 IoT 设备。客户端可以使用任何语言或框架来与 GraphQL 服务器进行交互。

4. 容易扩展

GraphQL 具有非常灵活的数据结构，使得它容易扩展。如果需要添加新的字段或类型，则只需要更改 GraphQL Schema，而无需对现有程序进行修改。这也为代码的维护和升级提供了极大的便利。

GraphQL 的缺点

GraphQL 虽然具有很多优点，但也有一些缺点。

1. 学习曲线陡峭

GraphQL 的学习曲线相对于传统的 RESTful API 较陡峭。需要学习 GraphQL Schema、类型系统、查询语言等多个概念，并且服务器端和客户端都需要使用 GraphQL。

2. 多余的数据传输

GraphQL 可以避免多次请求所需数据的问题，但同时也会传输一些不必要的数据。因为客户端只能查询其需要的字段，所以可能会查询到其不需要的字段，导致网络传输的多余数据量增加。

3. 难以缓存

由于客户端请求的字段可能是任意组合，GraphQL API 非常难以缓存。网络请求可能会因为缓存操作失败而变得显得更慢。

GraphQL 实现 CRUD 操作

下面将介绍如何使用 GraphQL 实现 RESTful API 的 CRUD 操作。

安装相关依赖

在开始实现之前，需要先安装一些必要的依赖。这里使用 Node.js 和 Express 框架，在项目根目录下执行以下命令安装需要的依赖。

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

定义 GraphQL Schema

在开始实现之前，需要先定义 GraphQL Schema。GraphQL Schema 是一个由类型和字段组成的结构，它定义了所有可查询和可修改的数据。

在本示例中，我们定义一个 Todo 类型，以及它所具有的字段，包括 id、text 和 completed。同时，我们也定义了 Query 和 Mutation 类型，并且编写了查询和修改逻辑。

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

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

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

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

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

编写 Resolvers

在定义了 GraphQL Schema 之后，需要实现 Resolvers，这里的 Resolvers 是指处理 GraphQL 查询和修改逻辑的代码。查询逻辑和修改逻辑都是通过 Resolvers 实现的。

在本示例中，我们编写了查询逻辑和修改逻辑的 Resolvers。其中查询逻辑是通过查询 MongoDB 数据库实现的，修改逻辑是通过更新 MongoDB 数据库实现的。

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

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

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

初始化服务器

在完成了 GraphQL Schema 和 Resolvers 的定义之后，需要初始化服务器。这里使用 Express 框架和 express-graphql 中间件来实现这个过程。

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

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

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

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

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

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

测试 GraphQL API

在完成了服务器的初始化之后，可以通过访问 http://localhost:3000/graphql 来测试 GraphQL API。这里使用 GraphiQL 工具来测试 API。

查询所有 Todos

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

根据 ID 查询 Todo

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

添加 Todo

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

修改 Todo 状态

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

总结

本文介绍了如何使用 GraphQL 实现 RESTful API 的 CRUD 操作。GraphQL 具有很多优点，最大的优势是能够减少网络请求次数，从而提高性能和减少延迟。了解了 GraphQL 的概念和定义之后，可以开始实现 GraphQL CRUD API，这里通过一个示例来演示了如何定义 GraphQL Schema、编写 Resolvers 和初始化 Express 服务器。

虽然 GraphQL 具有很多优点，但也存在不足之处，如高学习曲线、难以缓存等。开发者需要根据实际情况考虑是否使用 GraphQL，毕竟在某些场景下，传统的 RESTful API 仍然是更好的选择。

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

阅读全文

猜你喜欢

  • ECMAScript 2016 中的 RegExp 扩展：正则表达式的 y 修饰符详解

    正则表达式作为前端开发者日常工作的重要工具之一，其扩展与优化一直都是前端开发人员所追求的。在 ECMAScript 2016 的正则表达式扩展中，y 修饰符被引入。

    1 年前
  • 利用 Promise.race 实现超时处理和取消异步请求

    前言 在前端开发中，我们经常需要进行异步请求。在一些情况下，我们需要在规定时间内获取数据，如果等待时间过长，用户体验会受影响。此时，我们就需要用到超时处理和取消异步请求的方法来优化用户体验。

    1 年前
  • 使用 Docker 部署 Django+PostgreSQL 应用

    Docker 是一种流行的容器技术，通过 Docker 可以将应用程序打包成容器并进行部署。Docker 容器比虚拟机更轻量，启动、停止更快、更容易管理。本篇文章将介绍如何使用 Docker 部署 D...

    1 年前
  • 在 Chai 和 Mocha 中使用 mockserver 进行服务端模拟的技巧教程

    MockServer 是一个用 Java 编写的轻量级 Mock 框架，可以轻松模拟 HTTP 或 HTTPS 服务端，支持 REST 和 SOAP 的请求和响应。

    1 年前
  • ES9 新特性：数组.flat() 和 flatMap()

    在 JavaScript 的新版本 ECMAScript 2019 (ES9) 中，新增了两个有用的数组方法：flat() 和 flatMap()。这两个方法提供了更加便捷和高效的方式来处理多维数组，...

    1 年前
  • ES2021 引入的 Numeric Separators(数字分隔符)

    在 ES2021 中，一个新的 JavaScript 功能被引入——Numeric Separators（数字分隔符）。这个功能允许在数字中使用下划线 _ 作为分隔符，从而让数字更易读。

    1 年前
  • React Native 如何通过本地图片缓存优化加载速度

    对于 React Native 开发者来说，图片资源的处理一直是一个非常重要的问题。特别是在充满网络请求的应用程序中，通过加载远程图片资源可能会带来长时间的等待。于是，React Native 开发者...

    1 年前
  • Angular 中如何实现本地存储

    当我们在开发前端应用程序时，需要对数据进行存储和管理。而本地存储还是保存在客户端本地的数据，不需要每次都通过网络请求来获取数据，因此在提高应用性能方面有很大的优势。

    1 年前
  • 为你的无障碍设计助力：使用 WAI-ARIA 将图标引入文本流

    随着互联网的普及，我们的生活越来越离不开网络。然而，对于部分人群来说，访问网站或应用程序并不是那么容易。比如，视力或听力有问题的人，往往需要依赖辅助技术才能上网。因此，为了让我们的网站变得更加无障碍，...

    1 年前
  • PM2 部署实战：如何使用 PM2 在 IBM Cloud 上部署 Node.js 应用程序

    作为前端开发者，我们都知道 Node.js 是一个强大的后台开发工具，并且可以使用它来开发许多应用程序。但是，在我们开发完应用程序后，如何将它部署到线上服务器上面去呢？在本文中，我们将详细介绍如何使用...

    1 年前
  • ES8 中的扩展运算符详解

    扩展运算符（Spread Operator）是ES6中新增的一种运算符，可以将数组、对象、字符串等数据类型转化为更易操作的形式。而在ES8中，扩展运算符的功能得到了更进一步的拓展和提升，增加了对对象和...

    1 年前
  • 响应式设计中如何实现多语言切换

    前言 近年来，随着全球化的发展和互联网技术的深入应用，越来越多的网站和应用需要支持多语言切换。而在响应式设计中，如何实现多语言切换是我们需要深入探讨和学习的问题。本文将从响应式设计和多语言切换方面进行...

    1 年前
  • 解决使用 Next.js 服务器端渲染后网页性能变慢的问题

    在前端开发中，服务器端渲染（SSR）已经成为了一项非常重要的技术。它可以提高页面的性能、增强SEO效果以及改善用户体验。而 Next.js 作为服务器端渲染的重要工具，其使用非常广泛。

    1 年前
  • 利用 SSE 进行多用户数据推送

    引言 在现代 Web 应用程序的开发中，实时性已经成为了一个非常重要的特性。为了能够实现实时的数据更新，前端开发人员往往需要使用一些复杂的技术。例如像 WebSocket 和 Long-Polling...

    1 年前
  • webpack 打包后，路径错误导致图片和 CSS 无法正常访问

    在使用 webpack 进行前端开发时，我们常常会遇到一个问题：打包后，图片和 CSS 文件的路径错误，导致无法正常访问。这个问题在刚开始使用 webpack 的时候很容易遇到，解决起来却不是那么简单...

    1 年前
  • 在 Webpack4 中使用 Babel-plugin-syntax-dynamic-import

    在 Webpack 4 中使用 Babel-plugin-syntax-dynamic-import 介绍 随着前端单页面应用的流行，动态导入代码成为了一种常见的方式，可以大幅度减小首次加载的 Jav...

    1 年前
  • Mocha 和 Jest：测试 React 应用程序

    在前端开发中，测试是非常关键的环节。测试可以确保代码的可靠性和稳定性，并且能够在团队协作中提高代码的质量和效率。在测试中，单元测试是非常重要的一部分，它能够对代码中的各个功能模块进行独立测试，从而确保...

    1 年前
  • Vue Vuex 状态管理详解

    Vue.js 是一个流行的前端框架，它提供了一套完整的解决方案来开发单页的应用程序。而 Vuex 是一个专门为 Vue.js 框架开发的状态管理库，它可以帮助我们更好地管理我们的应用程序中的状态，并提...

    1 年前
  • ES6 中的项解构操作方法指南

    在 JavaScript 开发中，解构赋值是一个非常常用且便捷的操作，我们可以利用解构赋值从数组或者对象中快速提取所需的变量或属性并赋值给变量。 在 ES6 中，项解构（Destructuring）操...

    1 年前
  • Koa2 中使用 Redis 解决缓存问题

    在前端开发中，缓存是一个很重要的问题。缓存可以大大提高程序的运行速度，减轻服务器的负担，提高用户体验。在使用 Koa2 框架开发时，可以使用 Redis 来解决缓存问题。

    1 年前

相关推荐

    暂无文章