Apollo 客户端突变错误和更新组件
Posted
技术标签:
【中文标题】Apollo 客户端突变错误和更新组件【英文标题】:Apollo Client mutation error and updating components 【发布时间】:2018-09-03 23:59:05 【问题描述】:我有以下代码,我试图决定如何处理错误:
const gqlWrapper = graphql(registerMutation,
props: ( mutate, ownProps ) => (
registerUser: userDetails =>
mutate(
variables: ...userDetails ,
update: (proxy, resp) =>
// perform update to local state based on success
).catch(err =>
console.log(err);
// how to update components from here?
);
)
);
export default gqlWrapper(Register);
服务器发回一个 GraphQL 错误对象并将其发回,因此它出现在突变的 catch()
块中。如果突变成功,则使用proxy
参数更新组件的数据,但我看不到处理错误的等效方法。
理想情况下,我想更新 catch
块中的 Apollo 缓存,但此时我什至无法向组件或状态注入 props。
最终结果将是在 Register 组件上设置一个 prop/state,该组件显示一个带有条件渲染的错误消息组件。一种方法可能是处理 registerUser 突变起源的错误:
// Where the registerUser mutation get's initiated - on form submit
onSubmit=() =>
this.props.registerUser(values);
// the error could be caught here but I don't want this in the UI - I'd rather keep all this outside
但是我觉得这增加了 UI 的体积,我宁愿在页面底部,以及突变功能。有什么方法可以解决这个问题,还是我遗漏了一些明显的东西?
谢谢!
【问题讨论】:
【参考方案1】:您最好的选择是在您的 Apollo 客户端中使用 https://www.npmjs.com/package/apollo-link-error 之类的东西。这将允许您处理错误并根据这些错误应用您需要的任何自定义逻辑。它也应该允许您将.catch
排除在您的组件之外。其实这个模块在Apollo的documentation是推荐的
【讨论】:
以上是关于Apollo 客户端突变错误和更新组件的主要内容,如果未能解决你的问题,请参考以下文章
突变后使用订阅和更新创建重复节点 - 使用 Apollo 客户端