新的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组件,从本地缓存中查询数据,我将手动更新。这似乎是一个更好的解决方案,但文档中没有关于如何在页面/屏幕周围传播多个查询/突变组件的内容。
由于
答案 0 :(得分:0)
如果需要访问底层的React组件(即formik(以使用“ setErrors”或“ setFieldError”),则应该使用第二个位置(渲染功能中的>>> my_dict = {'test': {'0.2.0': {'deploy': {'some.host.com': {'outputs': [], 'inputs': []}},
'release': {'some.git': {'outputs': [], 'inputs': []}}},
'0.1.0': {'deploy': {'some.host.com': {'outputs': [], 'inputs': []}},
'release': {'some.git': {'outputs': [], 'inputs': []}}}},
'stage': {'0.1.0': {'deploy': {'stage.com': {'outputs': [], 'inputs': []}},
'release': {'stage.git': {'outputs': [], 'inputs': []}}}}}... ... ... ... ...
>>>
>>> import json
>>> print(json.dumps(my_dict, indent=2))
{
"test": {
"0.2.0": {
"deploy": {
"some.host.com": {
"outputs": [],
"inputs": []
}
},
"release": {
"some.git": {
"outputs": [],
"inputs": []
}
}
},
"0.1.0": {
"deploy": {
"some.host.com": {
"outputs": [],
"inputs": []
}
},
"release": {
"some.git": {
"outputs": [],
"inputs": []
}
}
}
},
"stage": {
"0.1.0": {
"deploy": {
"stage.com": {
"outputs": [],
"inputs": []
}
},
"release": {
"stage.git": {
"outputs": [],
"inputs": []
}
}
}
}
}
参数)
在其他情况下,您可以使用error
属性,例如使用'setState'或运行其他功能。
我发现你们不能同时使用两者:如果添加onError
prop,则渲染功能不会出错。