2.0 not clearing error after refetch

Intended outcome: data.error should be cleared after successful refetch.

Actual outcome: after error a successful refetch does not clear the error. (In fact I dont think query data is set to undefined on error either, it also retains previous response if there was one. Not sure if that caching and is possibly expected on network-only calls?)

How to reproduce the issue:

1. turn graphql server offline
2. as expected queries return an error { myData: undefined, loading: false, error: 'Error: Network error: Failed to fetch' }
3. turn graphql server back online and do a refetch
4. query returns data successfully but error is not cleared { myData: { uuid: abc123 }, loading: false, error: 'Error: Network error: Failed to fetch'  }

Version

• apollo-client@2.0.0

[Wenzil]

This issue prevents letting users retry failed queries manually. I would assume this is a really common use case. Any ETA on a fix?

[wdimiceli]

I am running into this issue as well… strangely enough it seems like the unit test for this scenario was removed some months ago.

The issue is fundamentally caused by ES6 Observables terminating the stream when an error is sent to an observer. In this case, any kind of error in the query causes the react-apollo component to get dropped (from here to here to here), and the subsequent teardown of the query is just a further consequence. The components themselves don’t contain much subscription logic beyond the mount/unmount lifecycle and thus remain unaware the queries were torn down.

It seems like the subscription logic for react components might need further consideration, or perhaps a different way to handle error conditions.

In either case, here is my own short-term workaround which should serve as a drop-in replacement for the normal graphql function:

const MyGraphQL = (...args) => Component =>
    class extends graphql(...args)(Component) {
        dataForChild() {
            const data = super.dataForChild();
            if (data.refetch && data.error) {
                data.refetch = (...args) => {
                    this.unsubscribeFromQuery();
                    const { lastError, lastResult } = this.queryObservable;
                    // If lastError is set, the observable will immediately
                    // send it, causing the stream to terminate on initialization.
                    // We clear everything here and restore it afterward to
                    // make sure the new subscription sticks.
                    this.queryObservable.resetLastResults();
                    this.subscribeToQuery();
                    Object.assign(this.queryObservable, { lastError, lastResult, isTornDown: false });
                    return this.queryObservable.refetch(...args);
                };
            }
            return data;
        }
    };