Apollo Client 2.1 中的突变错误处理
Posted
技术标签:
【中文标题】Apollo Client 2.1 中的突变错误处理【英文标题】:Mutation error handling in Apollo Client 2.1 【发布时间】:2018-09-02 07:51:58 【问题描述】:新的 Apollo Client 2.1 使用渲染道具模式而不是 HoC 模式,因此它稍微改变了查询和突变的处理方式。
我已经开始使用它,但不确定一些基本的东西。一是错误处理。我有一个自定义的“AuthResponse”组件,我想传递成功或错误响应。如果在我使用 React 的本地组件状态将错误传递给我的 AuthResponse 组件时出现错误(或成功),但我不确定这是否是最好的方法?
<View style=styles.homeContainer>
// this is where I want to pass the error to. Currently uses React component state but I'm not sure if this is the best way?
<AuthResponse
authResponse=(this.state && this.state.authResponse) || null
/>
<Mutation
mutation=registerMutation
update=(cache, data: registerUser ) =>
// user has been registered
onError=error =>
// is this the right place to start passing errors to other components?
this.setState(
authResponse: error
);
>
(registerUser, data, error ) => (
<View>
<Formik
onSubmit=(
values,
setSubmitting, setErrors /* setValues and other goodies */
) =>
registerUser( variables: ...values );
render=(
handleSubmit
) => (
<View>
<Button
onPress=handleSubmit
/>
</View>
)
/>
</View>
)
</Mutation>
<Text onPress=this.goToLogin>Login</Text>
</View>
我在这里假设 Mutation 组件应该尽可能小 - 即不要包裹整个页面,因为屏幕上的不同区域可能需要来自 Query 或 Mutation 组件的不同数据。
我确实考虑使用 Apollo Client 的 Query 组件包装 AuthResponse 组件,从本地缓存中查询数据,我将手动更新这些数据。这似乎是一个更好的解决方案,但文档中没有关于如何在页面/屏幕周围传播多个查询/突变组件的任何内容。
谢谢
【问题讨论】:
v2.1 添加Query
和Mutation
组件在我看来只是丑(代码味道)。但好消息是,您仍然可以像以前一样编写 2.1 之前的版本并编写 HOC。
是的,我完全同意!特别是当文档说要嵌套组件以组合它们时。这似乎很奇怪。我在 HoC 上做这件事的唯一问题是我需要文档,这些文档已经更改为新的 2.1 版本。
哦,很多人似乎也有同感:medium.com/@peggyrayzis/hi-emmanuel-6b989f5180e2
【参考方案1】:
恕我直言,如果您需要访问底层反应组件,即 formik(使用 'setErrors' 或 'setFieldError'),您应该使用第二个位置(渲染函数中的error
参数)
您可以将onError
属性用于其他情况,例如使用“setState”或运行其他功能。
我发现你不能同时使用两者:如果你添加 onError
属性,你不会在渲染函数中出错。
【讨论】:
以上是关于Apollo Client 2.1 中的突变错误处理的主要内容,如果未能解决你的问题,请参考以下文章
如何在使用表单组件时在 apollo-client 中链接突变
APOLLO CLIENT - 突变不起作用(无法读取未定义的属性“数据”)
使用带有反应生命周期方法的 react-apollo 2.1 突变
Apollo-client (react) - 更新创建突变 - “在对象 (ROOT_QUERY) 上找不到字段 Fund()”