简介
react-apollo-mutations-status
是一个 React 组件,它可以非常方便地为你的 Apollo mutations 添加 loading、error 和 success 状态。当你使用 Apollo 进行 mutations 的时候,你可以简单地将 react-apollo-mutations-status
添加到你的组件中,然后它会将 mutations 在处理过程中的状态丰富的呈现,让你可以很容易地在 UI 层面向用户展示效果。
安装
使用 npm 进行安装:
--- ------- -----------------------------
使用
首先,你需要将 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