GraphQL 优化:利用 Batching 减少网络资源浪费

前言

GraphQL是一个由Facebook开发的数据查询和操作语言,它可以让客户端决定数据的结构和内容,而不是由服务端决定返回哪些数据。GraphQL的使用已经在很多项目中得到了推广和应用,然而,在大规模的数据查询操作中,很容易造成网络资源的浪费,影响性能和用户体验。本文将介绍GraphQL中的Batching技术,以及如何应用Batching来减少网络资源的浪费。

Batching技术

Batching技术可以理解为一种将多个请求合并成一个请求发送的机制,以减少网络资源的浪费。在GraphQL中,Batching技术被用来将多个GraphQL查询解析成一次HTTP请求,然后服务端将响应的结果返回给客户端。GraphQL本身就是为Batching而设计的,因为它允许客户端在一个请求中指定多个查询。

示例

假设有以下两个GraphQL查询:

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

如果客户端分别发送这两个查询到服务端,那么服务端会收到两个独立的HTTP请求,这样会浪费网络资源。但是,如果使用Batching技术,客户端可以将两个查询合并成一个,如下所示:

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

客户端发送的是一个包含两个查询的数组,服务端只需要解析一次就能够返回两个查询的结果。服务端响应的结果也是一个数组,其中包含了与查询顺序对应的结果:

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

客户端收到服务端的响应后,可以通过id属性将响应与请求对应起来,从而获得正确的结果。

实现

下面是一个简单的使用GraphQL和Node.js实现Batching的示例。

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

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

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

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

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

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

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

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

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

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

首先,定义了UserAccount两种类型,以及Query类型中包含的两个查询字段useraccount。然后,定义了rootValue用来处理查询,最后启动了Express服务器并将GraphQL中间件挂载到/graphql路径上。

客户端可以使用任意的GraphQL客户端库来发送查询请求,并将多个请求合并成一个数组。以下是使用Apollo Client来发送查询请求的示例:

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

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

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

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

总结

GraphQL的Batching技术是一种非常有用的网络优化技术,可以减少网络资源的浪费,提高性能和用户体验。在实际应用中,可以在GraphQL客户端中使用任意的库来实现Batching,而服务端只需要在解析查询时支持多个查询并返回一个包含多个结果的数组即可。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/66472e75d3423812e4578a93