使用 GraphQL 构建高效的 RESTful API

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

随着前端技术的不断发展以及移动设备的广泛应用,RESTful API 已经成为了一个不可或缺的组成部分。然而,RESTful API 的缺陷也逐渐显现出来:请求和响应的数据结构固定,需要进行多次请求才能得到所需的数据,数据冗余等。而 GraphQL 则可以有效地解决这些问题。

什么是 GraphQL

GraphQL 是一个由 Facebook 开源的查询语言和运行时系统,旨在提供更加高效、强大、灵活的 API。它可以替代 RESTful API,使得客户端可以按照自己的需求从服务器获取所需数据,而不必受到服务器的限制。

GraphQL 有以下几个特点:

  • 它是一种强类型的查询语言,即客户端可以明确指定需要返回哪些数据。
  • 它是一个单入口的 API,即客户端只需要发送一个查询请求便可以获取所有需要的数据。
  • 它是可扩展的,即客户端可以随时根据需要添加需要返回的字段。
  • 它是自文档化的,即客户端可以根据 GraphQL 的 schema 查看返回数据的结构以及当前可用的 API。

GraphQL 和 RESTful API 的对比

传统的 RESTful API 使用 HTTP 请求来执行 CRUD 操作(创建、读取、更新、删除),但仅限于如下的 HTTP 方法、状态码和数据格式:

  • HTTP 方法:GET、POST、PUT、PATCH、DELETE。
  • HTTP 状态码:200、201、204、400、401、403、404、422、500。
  • 数据格式:JSON、XML、HTML、Text 等。

GraphQL 则更加灵活,它可以使用单一的端点执行所有操作,而且响应格式可以随需求动态变化。两者之间的主要区别如下:

  • 数据结构:RESTful 可能会因为数据结构不够灵活而产生多个请求或重复数据,GraphQL 可以一请求内获取所需数据的子集。
  • 版本管理:如果要添加或更改 API 端点,则需要创建新版本的 RESTful API。GraphQL 的单入口使得修改和添加新功能变得非常容易。
  • 接口文档:RESTful API 需要提供接口文档,以便客户端开发人员了解数据格式。GraphQL 的 schema 充当了接口文档,使得开发人员可以了解 API 支持哪些操作。
  • 性能:GraphQL 可以避免不必要的网络请求,这也是许多公司选择它的原因之一。

GraphQL 的使用

虽然 GraphQL 具有许多优点,但使用它也有一定的门槛。下面是使用 GraphQL 的一般步骤:

1. 编写 GraphQL schema

GraphQL 的 schema 定义了服务器上可用的操作和数据结构。它是一种数据类型语言,类似于 JavaScript。下面是 schema 的一些示例:

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

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

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

schema 定义了 Query 类型,它包含 planet 和 starship 两个字段。planet 和 starship 两个字段定义了它们自己独立的类型,它们的属性及其类型也都被定义在了 schema 中。

2. 搭建 GraphQL 服务器

可以使用现成的 GraphQL 服务器,比如 Apollo Server。也可以在自己的服务器上运行官方提供的 graphql-js 库。下面是一个搭建 Apollo Server 的示例:

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

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

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

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

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

3. 发送查询请求

客户端可以使用任何支持 GraphQL 的客户端库来发送请求。下面是使用 Apollo Client 发送查询请求的示例:

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

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

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

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

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

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

这里我们定义了两个查询语句:planetQuery 和 starshipQuery。由于我们的 schema 定义了类型和属性,客户端查询语句中的属性也必须包含在对应的类型中。

4. 响应结果

GraphQL 的响应结果非常灵活,客户端可以自由选择返回所需的字段。例如,客户端只需要 planet 的 name 属性,可以使用以下查询语句:

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

总结

尽管 GraphQL 需要学习和使用一定的门槛,但它可以为我们的应用程序提供更好的灵活性、效率和维护性。特别是在大量数据的情况下,使用 GraphQL 避免了不必要的重复请求,使得网络通信更加高效。如果您正在寻求一种更好的 API 解决方案,GraphQL 绝对值得一试。

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


猜你喜欢

  • ES7 引入的三个数组实例方法:想看懂代码,学这三个方法就够了

    ES7 引入的三个数组实例方法:想看懂代码,学这三个方法就够了 在 JavaScript 中,数组是最常用的数据结构之一。它提供了许多实用的方法,用于操作数组元素。

    1 年前
  • Headless CMS 系统如何实现数据备份与恢复?

    对于头部 CMS 系统来说,数据备份和恢复过程是至关重要的。因为无论是在开发还是在部署过程中,数据丢失都会对项目产生不可逆转的影响。因此,本文将深入讲解 Headless CMS 系统如何实现数据备份...

    1 年前
  • Cypress 中如何进行多浏览器截图比较?

    在测试 Web 应用程序时,截图是一个非常有用的工具。Cypress 是一个强大的前端测试框架,能够在测试过程中生成截图。Cypress 提供了很多有用的工具来对截图进行验证和比较。

    1 年前
  • React Hooks 实现全局提示组件

    React Hooks 是 React 16.8 版本引入的新特性,是一种新的 API,可让你在不编写 Class 的情况下使用 state 和其他 React 功能。

    1 年前
  • SASS 自动生成图片精灵的方法

    SASS 自动生成图片精灵的方法 在前端开发过程中,经常需要使用到图片精灵技术,以减小页面的加载时间和提升用户体验。而在众多的开发框架中,SASS 是一个非常流行并且优秀的 CSS 预处理器。

    1 年前
  • Webpack 开发实战:使用 Webpack 打包优化 React 项目

    前言:在现代 Web 开发中,Webpack 成为了不可或缺的重要角色。Webpack 提供了自动化能力,让前端开发者可以更加专注于业务开发。在这篇文章中,我们将探讨如何使用 Webpack 打包优化...

    1 年前
  • ES6 和 ES8 中的迭代器 —— 如何使用 Iterator 和 Generator 函数

    在 JavaScript 的 ES6 和 ES8 中,迭代器(Iterator)和生成器(Generator)函数被引入进来。迭代器是一个实现了特定迭代协议的对象,用于遍历对象的元素。

    1 年前
  • 如何在 TypeScript 中使用 Webpack 打包

    Webpack 是一个流行的现代化前端工具,用于打包、构建和优化 JavaScript 应用程序。而 TypeScript 则是一种强类型的 JavaScript 变体,可以帮助我们在开发前端应用时更...

    1 年前
  • React+PWA 项目的全过程

    摘要 React 是一个流行的 JavaScript 库,用于构建用户界面。Progressive Web App(PWA)则是一种 Web 应用程序,它采用渐进式增强策略,具有类似原生应用程序的用户...

    1 年前
  • Material Design 中使用 RecyclerView 实现 List 和 Grid 布局的完美展示

    Material Design 是一个流行的设计语言,在 Android 平台上得到了广泛应用。而 RecyclerView 是一个强大的组件,可以帮助我们在应用程序中显示大量数据。

    1 年前
  • 在 Mocha 和 Chai 中使用 fixtures 进行测试

    在 Mocha 和 Chai 中使用 Fixtures 进行测试 前言 在前端开发中,单元测试是非常重要的一个环节。它可以保证代码的质量,减少 bug 的出现,提高开发效率。

    1 年前
  • Web Components 构建的页面性能分析工具

    随着 Web 应用程序的复杂度不断增加,对于页面性能的优化也变得尤为重要。于是我们需要一套性能分析工具,以便识别并解决性能问题。本篇文章介绍一种使用 Web Components 构建的页面性能分析工...

    1 年前
  • ES10 中实现 Promise.all() 方法的手写示例

    简介 Promise.all() 方法在前端开发中是非常常见的一种异步编程解决方案。它实现了在一组 Promise 执行完毕后再进行下一步操作的功能,极大地方便了我们在业务逻辑代码中的编写。

    1 年前
  • 如何在 Fastify 框架中使用 Sequelize ORM

    Fastify 是一个快速、低开销和可扩展的 Node.js Web 应用程序框架,它提供了极佳的性能和安全性。而 Sequelize 则是一个基于 Promise 的 Node.js ORM(对象关...

    1 年前
  • Kubernetes 中 Ingress 资源的使用详解

    在 Kubernetes 中,Ingress 是一种管理 URL 的方式。它允许将多个服务发布到同一个 IP 地址和端口上,根据请求的 URL 路径将流量路由到不同的服务上。

    1 年前
  • Next.js 引入第三方组件遇到的问题及解决方法

    在开发前端应用过程中,引入第三方组件是一个家常便饭的操作,无论是为了提高开发效率、降低代码复杂度,还是为了实现一些特定的功能,在引入第三方组件时我们总是能够找到非常多的选择。

    1 年前
  • 解决使用 LESS 时出现的变量无法被识别的问题

    LESS 是一种 CSS 预编译语言,它可以帮助我们更加高效地编写 CSS 样式,并且支持像变量、嵌套、混合等高级特性。然而,有时候我们在使用 LESS 编写样式时,可能会遇到变量无法被识别的问题,这...

    1 年前
  • 在 Node.js 应用中如何处理 WebSocket 与 Socket.io 之间的切换

    在 Node.js 应用中如何处理 WebSocket 与 Socket.io 之间的切换 随着实时通信需求的增加,WebSocket 和 Socket.io 成为了前端开发中最常用的两种实现实时通信...

    1 年前
  • 如何使用 Express.js 进行 Web Scraping

    Web Scraping 是一种从网站上提取数据的技术。使用 Web Scraping 可以方便地从多个网站上获取数据,然后进行分析、处理或存储等操作。在前端开发中,我们往往需要使用 Web Scra...

    1 年前
  • Mocha 测试框架中的数据驱动测试技巧与最佳实践

    Mocha 是一个非常受欢迎的 JavaScript 测试框架。在 Mocha 中,数据驱动测试技巧可以让我们更方便地在不同的输入下进行测试。本文将介绍 Mocha 测试框架中的数据驱动测试技巧与最佳...

    1 年前

相关推荐

    暂无文章