简介
react-apollo-mutations-status 是一个 React 组件，它可以非常方便地为你的 Apollo mutations 添加 loading、error 和 success 状态。当你使用 Apollo 进行 mutations 的时候，你可以简单地将 react-apollo-mutations-status 添加到你的组件中，然后它会将 mutations 在处理过程中的状态丰富的呈现，让你可以很容易地在 UI 层面向用户展示效果。
安装
使用 npm 进行安装：
npm install react-apollo-mutations-status
使用
首先，你需要将 Apollo Client 连接到你的 React 应用程序中。然后，你可以简单地在你的组件中进行如下的引入：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- --------------
------ --------------- ---- -------------------------------
------ ---------- ---- ----------------------
----- ----------- ------- --------------- -
-------- -
------ -
-----
---------------- --------------------- --
------
-
-
-
------ ------- --------------------------------在这个示例中，MyMutation 是你自己的 GraphQL mutation，你需要将其传递给 graphql 高阶组件，然后将返回的组件传递到 MutationsStatus 组件中。
MutationsStatus 组件会自动地根据你传入的 mutation 参数，从 Apollo Client 中获取该 mutation 最新的状态信息，并将 loading、error 和 success 状态传递给它的子组件。你可以用这些状态来实现各种 UI 效果。
可选参数
除了必需的 mutation 参数之外，MutationsStatus 组件还接受以下可选参数：
loadingClassName: 当 mutation 处理过程中处于loading状态时为包含组件添加的 class 名称，默认值为null。errorClassName: 当 mutation 处理过程中出现错误时为包含组件添加的 class 名称，默认值为null。successClassName: 当 mutation 处理完成时为包含组件添加的 class 名称，默认值为null。loadingComponent: 当 mutation 处理过程中处于loading状态时需要显示的组件，默认值为<div>Loading...</div>。errorComponent: 当 mutation 处理过程中出现错误时需要显示的组件，默认值为<div>Something went wrong: {this.props.error.message}</div>。successComponent: 当 mutation 处理完成时需要显示的组件，默认值为null，即不显示任何东西。
示例
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- --------------
------ --------------- ---- -------------------------------
------ ---------- ---- ----------------------
----- ----------- ------- --------------- -
-------- -
------ -
-----
----------------
---------------------
--------------------------
----------------------
--------------------------
----------------------------------------
--------------------------- ---------------------------------
-
------- --------- -------------
------------------
------
-
-
-
------ ------- --------------------------------在这个示例中，当 mutation 处理过程中处于 loading 状态时，会为组件添加 loading 类名，并显示一个 Loading... 的文本。当 mutation 处理过程中出错时，会为组件添加 error 类名，并显示一个 Error: ${error message} 的文本。当 mutation 处理结束时，会为组件添加 success 类名，并显示组件的内容，即 My component content。
结论
react-apollo-mutations-status 是一个简单而强大的 React 组件，可以帮助你快速为你的 Apollo mutations 添加更丰富的状态。通过按照本文所示的步骤安装和使用 react-apollo-mutations-status，你可以改善你的应用程序的用户体验，并更有效地处理错误和状态信息。希望这篇文章能够帮助你使用这个组件前进更进一步。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562ef81e8991b448e0a82