React-apollo: onError still getting called multiple times in v3.0.1

Created on 23 Aug 2019  路  1Comment  路  Source: apollographql/react-apollo

Intended outcome:

onError should be called once per failed request

Actual outcome:

onError is called multiple times

How to reproduce the issue:
https://codesandbox.io/s/onerror-gets-called-many-times-v301-nzucv

This was supposed to be fixed by #3339, but I am still seeing onError get called multiple times for a single error.

image

Version
@apollo/react-components: 3.0.1
@apollo/react-hooks: 3.0.1
apollo-cache-inmemory: 1.6.3
apollo-client: 2.6.4
apollo-link-http: 1.5.15

>All comments

Update: I found that the problem only occurs if onError or onCompleted are inline functions e.g.
onError={err => console.log(err)}

If onError and onCompleted are class instance methods, then the problem does not happen:

class Test extends React.Component {
    handleError = err => {
        console.log(err);
    };

    render() {
        <Query onError={this.handleError}>...</Query>
    }
}

https://codesandbox.io/s/onerror-gets-called-once-with-class-instance-method-l620v

I'm guessing this has to do with the fact that inline functions are recreated on every render.
This makes it very easy to work around the issue if you are using class components. If you are using a functional component, you could possibly get around the issue by memoizing your onError and onCompleted functions.

Was this page helpful?
0 / 5 - 0 ratings