什么是 apollo-link-batch-http?
Apollo-link-batch-http 是一个用于 Apollo Client 的 npm 包，它将多个 GraphQL 查询打包成一个 HTTP 请求，通过减少服务器请求次数来提高应用程序性能。这个包是用 TypeScript 写成的，是由 Apollo 团队维护的。
安装
要使用 apollo-link-batch-http，请在终端运行以下命令：
npm install apollo-link-batch-http # 或者 yarn add apollo-link-batch-http
使用
要使用 apollo-link-batch-http，我们需要创建一个 HttpLink 和一个 BatchHttpLink。BatchHttpLink 可以使用 HttpLink 和等待时间作为选项。
-- -------------------- ---- -------
------ - ---------- - ---- --------------
------ - ------------- - ---- -------------------------
----- ---- - -----------------
--- ---------------
---- -----------
--------- ---
-------------- ---
---
---在上面的代码中，我们创建了一个链接（link），并使用 BatchHttpLink 和 HttpLink 进行配置。我们将使用的 GraphQL 端点的 URL 设置为 "/graphql"，batchMax 设置为 10。这意味着我们将在发送到服务器之前等待最多 10 个请求。
在使用 apollo-link-batch-http 连接到服务器时，我们需要将其添加到我们的 Apollo 客户端中。我们可以通过将其添加到 ApolloLink 链中来实现。这就是为什么我们在上面的代码段中使用了 ApolloLink.from 这个函数。
示例代码
我们可以看一下下面的代码示例来深入理解如何使用 apollo-link-batch-http。我们将使用 React 和 Apollo Client 来创建一个简单的应用程序，并将它连接到 GraphQL API。我们将设置一个要查询的电影列表，然后将其发送到我们的服务器。我们将把多个查询打包成一个 HTTP 请求，以提高网络性能。
设置模型：
-- -------------------- ---- ------- -- -------- ------ ---- ----- - - --- ------- ------ ------- --------- ------- ----- --------- - ------ ---- ---------------- - - ------- -------- --
创建一个 Apollo 客户端：
-- -------------------- ---- ------- -- --------- ------ - ------------- ------------- - ---- ----------------- ------ - ------------- - ---- ------------------------- ----- ---- - --- --------------- ---- ------------------------------ --------- --- -------------- --- --- ----- ----- - --- ---------------- ----- ------ - --- -------------- ----- ------ ---
编写 GraphQL 查询：
-- -------------------- ---- -------
-- ------
------ - --- - ---- -----------------
------ - -------- - ---- -----------------
------ - ---------------- - ---- ----------
----- ----------- - ----
----- --------- -
------ -
--
-----
--------
----
-
-
--
-------- ----- -
----- - -------- ------ ---- - - ----------------------------------------
-- --------- ------ -------------
-- ------- ------ ------- ------------------
-- ------ -
----- ------ - ------------
------ -
----
------------------- -- -
--- ---------------
--------------------------
-----------------------------
------------------------- ----------
-----
---
-----
--
-
-
------ ------- ----运行应用：
-- -------------------- ---- -------
-- --------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------------- - ---- -----------------
------ ------ ---- -----------
------ --- ---- --------
----------------
--------------- ----------------
---- --
------------------
-------------------------------
--在这个应用程序中，我们使用 Apollo Client 和 apollo-link-batch-http 包来减少从客户端到服务器的请求数。我们先定义了一个 Movie 模型和一个 MovieQueryResult 接口，关联 Apollo Client 和 BatchHttpLink，然后使用 gql（GraphQL Tag）和 useQuery 钩子来查询电影列表。最后，我们给我们的应用程序提供了 Apollo Client，这样我们的代码就能查询并渲染我们的数据了。
总结
通过把多次 GraphQL 查询打包成一个 HTTP 请求，我们可以大大减少我们的应用程序向服务器发送的请求数量，从而提高性能。要做到这一点，我们可以使用 apollo-link-batch-http 包。这个包可以与 Apollo Client 一起使用，并允许我们对批处理事件和批处理大小进行细粒度控制。希望这篇文章能够帮助你更好地使用 apollo-link-batch-http 包来提高你的应用程序性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedab83b5cbfe1ea06107b6