Mutation error handling in Apollo Client 2.1

Question

The new Apollo Client 2.1 uses the render props patters instead of HoC pattern, so it's changed the way Queries and Mutations are handled a little.

I have started using it, but am unsure of a few basic things. One is error handling. I have a custom "AuthResponse" component which I want to pass in either the success or error response. If it's an error (or success) at the moment I am using React's local component state to pass the error to my AuthResponse component, but I'm not sure if this is the best way?

            <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>

I am assuming here that the Mutation component should be as small as possible - i.e. not wrap the entire page, because different areas on the screen may require different data from Query or Mutation components.

I did consider wrapping the AuthResponse component with a Query component from Apollo Client, querying the data from local cache which I would have updating manually. This seems like a better solution but there's nothing in the docs about how to spread multiple Query/Mutation components around a page/screen.

Thanks

v2.1 adding Query and Mutation components is just ugly (code smell) to my mind. But good news, you can still write as pre 2.1 and compose HOC like you did before. — MacKentoch
Yeah I completely agree! Especially when the docs are saying to nest the components in order to compose them. It seems weird. My only issue with doing it the HoC was is that I need the docs, which have since changed to the new 2.1 version. — JamesG
Ohh there's a lot of people feeling the same it seems: medium.com/@peggyrayzis/hi-emmanuel-6b989f5180e2 — JamesG

zangrafx zangrafx · Accepted Answer · 2018-11-09T10:44:09

Imho you should use second location (error parameter in render function) if you need to have access to underlying react components, i.e. formik (to use 'setErrors' or 'setFieldError')

You can use onError prop for other cases, for example to use 'setState' or run other functions.

I've fount that yous cannot use both in the same time: if you add onError prop, you won't get error in render function.

Mutation error handling in Apollo Client 2.1

1 Answers