通俗易懂的 GraphQL 教程

什么是 GraphQL？

GraphQL 是一种用于构建 API 的查询语言。它允许客户端精确地指定需要从服务端获取的数据，而服务端只会返回客户端请求的数据，避免了多余的数据传输。GraphQL 还提供了灵活的类型系统，可以在客户端进行查询验证，并支持多种数据源，使得后端服务可以轻松地整合多种数据源。

GraphQL 的优缺点

优点

  1. 前端可以精确地指定获取需要的数据，减少了网络带宽的浪费。
  2. 前后端可以协商 API，不需要一次性返回所有数据，避免了多余的数据传输。
  3. GraphQL 提供了灵活的类型系统，可以在客户端进行查询验证。
  4. 支持多种数据源，后端服务可以轻松地整合多种数据源。

缺点

  1. GraphQL 查询较为复杂，需要一定的学习成本。
  2. 因为 GraphQL 查询比较灵活，API 的设计可能会出现较大的复杂度。

GraphQL 的结构

GraphQL 是建立在 Schema 和 Resolver 上的。Schema 定义了数据类型和查询、变更等 API 的形状。Resolver 则是服务端代码，用于处理客户端的查询并返回所需的数据。

GraphQL 的语法基本上由两部分组成：查询和变更。查询用于获取数据，变更用于修改数据。

GraphQL 的查询

首先，定义一个 GraphQL 查询：

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

这里，我们在查询用户的基本信息，以及该用户的所有帖子。查询的结构定义的是一个嵌套的对象，其中 user、posts 等均对应服务端的 Resolver 函数。

GraphQL 的变更

GraphQL 变更指的是在服务端执行更改数据的操作。首先，我们定义一个基础的变更类型：

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

这里，我们定义了一个名为 updateUserName 的变更类型，它可以接受两个参数 id 和 name，分别用于指定用户的 ID 和新的名称。变更类型的返回值应该是一个 User 类型的数据，表示修改成功后的用户信息。

下面是一个基础的 Resolver 函数，用于实现这个变更：

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

这里的 Resolver 函数接受两个参数，一个 parent 参数表示上级数据对应的 Resolver 函数中返回的数据，args 参数表示查询中的参数，可以用于修改数据。我们可以在 Resolver 函数中处理数据库中的更新操作，然后返回更新后的用户信息。

GraphQL 的示例

下面是一个简单的 GraphQL 示例代码，我们实现一个包含用户和用户发表的所有博客文章的数据 API。首先，创建一个基本的 Schema 定义：

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

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

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

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

这里我们定义了三个数据类型：User、Post 和 Query，并且定义了两个变更类型：updateUserName 和 createPost。我们的 API 支持查询一个用户、查询一个博客文章、查询所有博客文章，并且支持更新用户名称和发布一篇博客文章。

接下来，我们需要实现这些数据类型和变更类型的 Resolver 函数，作为服务端代码。假设我们的服务端使用 Node.js 和 Express，那么可以按照如下方式实现：

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

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

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

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

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

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

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

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

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

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

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

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

我们使用 GraphQL 内置的类型系统和 Resolver 函数实现了基本的 API 功能，包括查询用户、查询帖子、查询所有帖子、更新用户信息和创建新的帖子。我们可以在 GraphQL Playground 中执行查询、变更等操作来验证这些功能的正确性。

总结

GraphQL 提供了一种灵活、易用、高

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

阅读全文

猜你喜欢

  • 初学者指南：如何从头开始使用 Webpack

    Webpack 是一个模块化打包工具，它可以将多个 JavaScript 文件打包成一个单独的文件，也可以为其他类型的文件进行打包和转换（例如，SCSS、图片和字体文件等）。

    5 个月前
  • Vue.js 中如何部署项目到服务器

    Vue.js 是一款流行的前端框架，开发者可以使用它来构建单页面应用程序或复杂的交互式用户界面。一旦构建出的项目准备部署到服务器，开发者需要一些技术来完成这项任务。

    5 个月前
  • Sequelize 之查询条件中使用 LIKE 匹配详解

    Sequelize 是 Node.js 环境下比较流行的 ORM 库，它可以让我们用 JavaScript 的方式来操作数据库，使我们的代码更加简洁高效。在 Sequelize 的使用过程中，我们经常...

    5 个月前
  • C++ MFC 应用程序无障碍调试实用技巧分享

    前言 MFC (Microsoft Foundation Classes) 是一种用于创建 Windows 应用程序的 C++ 类库。MFC 应用程序开发需要掌握大量的 Windows API 接口，...

    5 个月前
  • PM2 自动监控 node.js 进程

    如果你是一名前端开发者，你应该已经使用过 node.js 来开发后端应用了。但是，每次启动应用程序时，您是否会遇到以下问题？ 应用崩溃，需要重新启动。 进程挂起，需要手动恢复。

    5 个月前
  • Mongoose 中断指令的使用：break 和 return

    在使用 Mongoose 操作数据库时，有时候需要在某些条件下停止代码的执行。这时候就需要使用 break 和 return 这两个中断指令。 break 在循环执行代码时，break 可以用来立即停...

    5 个月前
  • Enzyme 中使用 mockReturnValue() 模拟函数的返回值

    Enzyme 中使用 mockReturnValue() 模拟函数的返回值 在前端的开发中，单元测试是非常重要的一个环节，而在实现单元测试的过程中，为了保证测试的准确性和可靠性，我们经常需要模拟一些函...

    5 个月前
  • 使用 ESLint 对文件代码进行规范化

    随着前端开发技术的不断发展，代码规范化成为了技术团队中不可避免的话题。ESLint 作为一个基于 JavaScript 的代码检查工具，能够对代码的质量和风格进行自动化检测，提高代码的可读性、可维护性...

    5 个月前
  • 如何使用 GraphQL 实现本地状态管理

    如何使用 GraphQL 实现本地状态管理 GraphQL 是一种新兴的数据查询语言，它可以帮助前端开发者更快地获取数据并在本地状态中管理它们。本文将探讨如何使用 GraphQL 实现本地状态管理，内...

    5 个月前
  • 适配 Material Design 的最佳实践和技巧

    Material Design 是谷歌推出的一种设计语言，用于提供一种现代化的设计方法，使用户体验更加统一。这种设计语言强调简洁、明亮、真实和有意义。如今，越来越多的网站和移动应用开始采用 Mater...

    5 个月前
  • TypeScript 中函数重载的使用方法

    在 TypeScript 中，函数重载是一种可以解决函数参数类型不确定的问题的方法。本文将详细介绍 TypeScript 中函数重载的使用方法，并提供示例代码和学习指导。

    5 个月前
  • MongoDB 遇到 Cannot find module 'bson' 的解决方法

    在使用 Node.js 开发中，我们经常需要和 MongoDB 进行交互。在使用 MongoDB 官方提供的 Node.js 驱动程序时，可能会遇到 “Cannot find module 'bson...

    5 个月前
  • socket.io 实现 websocket 双工通信功能

    在现代网络应用中，实时双向通信非常关键。传统的 HTTP 协议是一种无状态的请求响应模式，无法进行实时通信，但是 WebSocket 协议提供了一种长连接方式，可以实现双向通信。

    5 个月前
  • 使用 Web Components 更快地构建网页

    Web Components 是一组技术的集合，旨在帮助开发者创建可复用且容易维护的组件，从而提高网页构建的效率。本文将介绍 Web Components 技术，其如何加速开发并提高网页的质量，以及如...

    5 个月前
  • 如何基于 Serverless 架构实现在线教育应用开发

    随着互联网的发展，许多传统行业都开始转型线上，其中在线教育成为了热门领域之一。而 Serverless 架构作为一种新型技术，它的快速迭代以及弹性伸缩等优点，使得它成为开发在线教育应用的一种理想之选。

    5 个月前
  • 基于 Express 的 RESTful API 实现方法

    简介 RESTful API 是一种描述资源的网站API，它使用 HTTP 协议定位 API 资源，使用 HTTP 方法（GET，POST，PUT，DELETE）对资源进行操作，返回 JSON 格式的...

    5 个月前
  • 如何为自定义元素添加生命周期方法

    在前端开发中，有时我们需要创建自定义的 HTML 元素，以便在页面中使用。Web 组件标准提供了一个使用自定义元素（Custom Element）的方法。但是，与常规 HTML 元素不同，自定义元素不...

    5 个月前
  • Next.js 应用中如何集成 Google Analytics

    Google Analytics 是一项强大的分析工具，可以帮助网站和应用程序拥有深入了解受众的操作和行为。在这篇文章中，我们将讨论如何在 Next.js 应用中集成 Google Analytics...

    5 个月前
  • 使用 ES6 (ECMAScript 2015) 的 Proxy 重新实现 ECMAScript 2018 的反射 API

    Proxy 是 ES6（ECMAScript 2015）中新增的结构化类型，它可以拦截并改变操作对象的默认行为。而 ECMAScript 2018 中新增的 Reflect 对象 API 则提供了一种...

    5 个月前
  • Headless CMS 解决 Web 应用跨平台开发难题

    随着移动互联网的普及，Web 应用的跨平台需求越来越强烈。例如，在同一时间内需要支持 iOS、Android、Web 等多个平台。这时，传统 CMS 的数据结构和组织方式就会遇到瓶颈，难以满足这种跨平...

    5 个月前

相关推荐

    暂无文章