React-Apollo-Handler 是一个适用于 React 应用的 Apollo 事件处理器，它帮助我们更好地处理 GraphQL 查询过程中的事件，并将数据流管理变得更加便捷。本文将为大家详细介绍使用 React-Apollo-Handler 的步骤和注意事项。
安装和基础配置
React-Apollo-Handler 可以通过 NPM 包管理器进行安装。在终端中输入以下命令即可：
npm install react-apollo-handler
React-Apollo-Handler 是一个基于 Apollo Link 的事件处理器。在使用之前，我们需要先对 Apollo Link 进行配置。可以通过以下代码创建一个 Link 构造函数，并将其作为 ApolloClient 的参数：
-- -------------------- ---- -------
------ - ------------ - ---- ----------------
------ - ---------- - ---- --------------
------ - -------------- - ---- -------------------
------ - ------------- - ---- ------------------------
------ - ------------------ - ---- -----------------------
----- ---------- - --- ---------------------- -------- -- -
------ ----------------------------- -- -
--------------------- - ----------------------- ------------
------ -------
---
---
----- -------- - ----------------
---- --------------------------------
---
----- ---- - -----------------
-----------
---------
---
----- ------ - --- --------------
------ --- ----------------
----- -----
---在上述代码中，我们首先创建了一个自定义 Link，它会打印出当前操作的名称，然后将请求转发给下一个环节。接着，我们通过 createHttpLink 方法创建了一个能够处理 GraphQL 请求的 HTTP 链接，并通过 ApolloLink.from 方法将两个 Link 组合成一个 Link 的链路。最后，我们创建了一个 ApolloClient 对象，将刚刚创建的 Link 链路设置为其 link 属性。
React-Apollo-Handler 的应用
要使用 React-Apollo-Handler，我们可以为每个请求组件都创建一个事件处理器并将其传递给 Query 或 Mutation 组件的 client 属性中。下面是一个基本的例子：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ --- ---- --------------
------ - ----- - ---- ---------------
------ - ------------------ - ---- -----------------------
----- ------------- - ----
----- -
--- -
--
-----
-
-
--
----- --- ------- --------- -
-------- -
------ -
------ --------------------- ---------------------------
--- -------- ------ ----- -------------- ----------- -- -- -
-- --------- ------ -------------
-- ------- ------ ------- ------------------
------ -
-----
----------------- --------------------
------- ----------- -- ----------------------------------- --------------
------- ----------- -- ----------------------- --------------
------
--
--
--------
--
-
-
------ ------- ------------------------在上面的代码中，我们首先定义了一个查询语句 GET_DOG_QUERY，然后创建了一个名为 Dog 的组件。在组件的 render 方法中，我们通过 Query 组件进行 GraphQL 请求，并将 React-Apollo-Handler 包裹在其内。我们将 client 属性设置为 this.props.client，这样便可在组件外部配置 ApolloClient，然后将其作为 props 传入组件中。
在 Query 中，我们需要通过 render prop 的方式获取 GraphQL 请求的状态和数据。但是，React-Apollo-Handler 与其他 Apollo 的事件处理器不同，它额外提供了两个回调函数：handleSuccess 和 handleError。当请求成功时，我们可以通过 handleSuccess 回调函数手动触发成功事件，然后 React-Apollo-Handler 将重新发起一次相同的 GraphQL 请求，以更新当前组件的状态。当出现错误时，我们可以通过 handleError 回调函数手动触发错误事件，并让 React-Apollo-Handler 返回一个错误的状态。
总结
React-Apollo-Handler 在处理 Apollo 事件时提供了更为直接的方式。通过将其包裹在 Query 或 Mutation 组件内，我们可以直接通过回调函数控制每个请求的状态，并且避免在状态管理方面重复编码。尤其是在需要处理 GraphQL 请求失败和重试方面的场景下，React-Apollo-Handler 提供了很高的可用性和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055adc81e8991b448d8825