React-apollo: `loading` always true when re-render after error received from server

[SkReD]

Simple todo list is rendered with data from server

class Todos extends Component {
    render() {
        if (this.props.data.loading) {
            return <img src={logo} className="App-logo" alt="logo"/>;
        } else if (this.props.data.error) {
            return JSON.stringify(this.props.data.error, null, 4);
        }
        else {
            return this.props.data.todos.map(todo =>
                <div key={todo.id}>
                    {todo.name}
                    <button onClick={() => this.props.onEdit(todo)}>edit</button>
                </div>
            );
        }
    }
}

const TodosWithData = graphql(todosQuery)(Todos);

where todosQuery is:

import gql from 'graphql-tag';

export const todosQuery = gql`
    query Todos($withError: Boolean) {
        todos(withError: $withError) {
            id,
            name
        }
    }
`;

When withError variable is set to true the error on server generated and query returns an error.
Then this error is rendered in section of Todos component.

The main react containers is contains following code

class App extends Component {
    constructor(...args) {
        super(...args);
        this.state = {withError: false};
    }
    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo"/>
                    <h1 className="App-title">Welcome to React</h1>
                </header>
                <div className="App-intro">
                    <button onClick={() => this.setState({withError: !this.state.withError})}>
                        {this.state.withError ? 'Request without error' : 'Request with error'}
                    </button>
                    <button onClick={() => this.setState({rerender: !this.state.rerender})}>Rerender</button>
                    <button onClick={() => this.setState({unmountTodosOnEdit: !this.state.unmountTodosOnEdit})}>
                        {this.state.unmountTodosOnEdit ? 'Dont unmount todos on edit' : 'Unmount todos on edit'}
                    </button>
                    {
                        this.state.editTodo &&
                            <TodoFormWithMutation editTodo={this.state.editTodo} onSuccess={() => this.setState({editTodo: null})}/>
                    }
                    {
                        this.state.unmountTodosOnEdit && this.state.editTodo
                            ? null
                            : <TodosWithData withError={this.state.withError} onEdit={(todo) => this.setState({editTodo: todo})}/>
                    }
                </div>
            </div>
        );
    }
}

...so when rerender state is chaning all childrens of app are re-rendered.

Intended outcome:
When re-render occures error should be still presented in returned data of TodosWithData

Actual outcome:
Error is present in first render of component, but all subsequent renders are containing loading set to true, and no error or data props setted.

How to reproduce the issue:
I create a reproduction app from create-react-app and apollo-server-express
(can be cloned from https://github.com/SkReD/apollo-demo.git)
To run it you need to start express server by npm run start-server command and then run
webpack-dev-server by command npm start.
Then do following steps:

1. Press 'Request with error' button (error should be displayed)
2. Then press 'Rerender' button (loading icon should be presented)

Investigation results
Looks like currentResult method of ObservableQuery (link) is returning wrong result because it cannot find queryStoreValue for query and there is a logic that loading is set to true if queryStoreValue is undefined, yet there is lastError presented, which contains actual error from server.

Version

• [email protected]
• [email protected]

[stale[bot]]

This issue has been automatically labled because it has not had recent activity. If you have not received a response from anyone, please mention the repository maintainer (most likely @jbaxleyiii). It will be closed if no further activity occurs. Thank you for your contributions to React Apollo!

[jer-sen]

hey !

[YuryIlinikh]

+1

[alerg]

+1

[jorihardman]

+1

[dobesv]

I am having this exact error! Here's the error template to reproduce it:

https://github.com/dobesv/react-apollo-error-template/tree/error-disappearing

If you run this and look in the logs you can see that the error is reported as a prop only once. As soon as props are re-calculated the error is gone and loading is true forever.

[dbelchev]

@jbaxleyiii This is happening both with refetch and polling features, as well. I see that most of the people commenting on the issue are using v2.x, but I'm experiencing this on react-apollo 1.4.16, also.
This is mentioned here, as well: https://github.com/apollographql/react-apollo/issues/1466

[juank11memphis]

+1 Any update on when is this gonna get fixed?

[tdeedlesATX]

+1

[rad182]

+1

[thomhos]

+1

[jbaxleyiii]

This should be fixed in the current beta!

[ksonnad]

+1 on v2.0.4

[tysonmatanich]

+1 on v2.1.5

[mhmahmoodalam]

+1 on 2.4.2

[pavan-shipmnts]

+1 on "react-apollo": "^2.5.1"

[supachaic]

+1 on "react-apollo": "^2.5.4"

[panzelva]

Setting errorPolicy="all" on Query component fixed this issue for me.

[hwillson]

The original issue here should be resolved (thanks to https://github.com/apollographql/react-apollo/pull/2718) in react-apollo >= 2.5.3. For all other outstanding issues, please consider opening a new issue. Thanks!