利用 GraphQL 优化 RESTful API 的性能

阅读时长 7 分钟读完

利用 GraphQL 优化 RESTful API 的性能

随着互联网技术的不断发展,RESTful API 已经成为前后端交互的标准。RESTful API 可以通过标准 HTTP 接口实现跨语言、跨平台的通信。但是,RESTful API 的一些问题也日益凸显,例如 API 数据冗余,无法按需获取数据等。这时候,GraphQL 可以派上用场。

什么是 GraphQL?

GraphQL 是一个由 Facebook 开发的数据查询和操作语言,用于 API 的设计和实现。GraphQL 可以精确地获取所需数据,避免 API 数据冗余的问题。

与 RESTful API 不同,GraphQL 通过一个单一端点来查询和获取数据,而不是通过多个端点。这个单一端点被称为“schema”。当前端需要获取数据时,它会向 GraphQL 发出查询请求,并传入参数,GraphQL 可以解析参数,并返回与参数匹配的精确数据。这种机制使得前端可以像自己想要的那样获取数据,而不是被 API 返回的数据所限制。

GraphQL 优化 RESTful API 的性能

  1. 精确获取数据

RESTful API 通常返回一个完整的资源对象,包括所有的属性和关联对象。这种机制过于灵活,导致数据冗余和带宽浪费。 GraphQL 的查询是精确的,前端可以精确地获取自己需要的数据,避免了冗余数据和带宽浪费。

以下是 RESTful API 和 GraphQL 查询的对比:

RESTful API:

返回:

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

GraphQL 查询:

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

返回:

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

由于 RESTful API 返回完整的资源对象,而 GraphQL 可以精确查询,因此 GraphQL 可以避免冗余数据和带宽浪费。

  1. 多重查询

RESTful API 的多重查询需要多个 HTTP 请求和响应。这使得 RESTful API 很难查询和获取多个数据集。如果查询过于复杂,返回数据的大小会很大,这会导致性能问题。 GraphQL 可以通过单个查询获取多个数据集,并返回所需的数据。这使得前端可以更轻松地查询和获取多个数据集。以下是 GraphQL 的查询示例:

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

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

这两个查询都是针对相同的课程,一个查询中包含了学生数据,另一个查询中包含了教师数据。前端可以使用这种方式避免多个请求和响应,查询和获取多个数据集。

  1. 类型检查

RESTful API 可以返回任何数据类型,包括值和对象,这使得前端很难处理数据。GraphQL 可以对返回数据进行类型检查,前端可以确定接收到的数据类型,这使得前端更容易对数据进行处理。

例如,在 RESTful API 中,一个 POST 请求可能返回一个 JSON 对象,而其他请求可能返回一个字符串或其他类型的数据。与之不同,GraphQL 能够对返回的数据进行类型检查。以下是一个 GraphQL 查询的示例:

GraphQL 将在返回后,会返回一个包含 id、name 和 age 属性的对象。这与 RESTful API 不同,RESTful API 可以返回任何数据类型。

示例代码

以下是一个基于 GraphQL 的 Node.js 服务器的示例代码:

index.js:

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

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

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

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

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

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

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

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

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

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

在上面的示例中,我们通过 buildSchema 方法创建了一个 GraphQL schema,然后通过 express-graphql 中间件将 GraphQL API 集成到 Express 中。schema 中定义了 Course、Student 和 Query 对象,分别对应课程、学生和查询。我们在模拟数据中模拟了两个课程和两个学生。在实现查询逻辑 root 中,我们通过 find 方法根据 ID 查询相应的课程或学生。

结论

相比于 RESTful API,GraphQL 更加灵活和精确,可以避免带宽浪费和冗余数据。同时,GraphQL 也可以避免多个请求和响应,用于查询和获取多个数据集。GraphQL 还可以对返回数据进行类型检查,使得前端更容易处理数据。如今,GraphQL 正在得到越来越多的支持和使用,它可以优化 RESTful API 的性能,提高前后端的交互效率。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6739aaf74567f25775997246

纠错
反馈