Apollo Client 2.1中的变异错误处理

问题描述 投票:0回答:1

新的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组件,从本地缓存中查询数据,我将手动更新。这似乎是一个更好的解决方案,但在文档中没有关于如何在页面/屏幕周围传播多个Query / Mutation组件的内容。

谢谢

reactjs react-native react-apollo apollo-client
1个回答
0
投票

Imho你应该使用第二个位置(渲染函数中的error参数),如果你需要访问底层的反应组件,即formik(使用'setErrors'或'setFieldError')

您可以将onError prop用于其他情况,例如使用'setState'或运行其他函数。

我发现你不能同时使用两者:如果添加qazxsw poi prop,你就不会在渲染函数中出错。

© www.soinside.com 2019 - 2024. All rights reserved.