Refetch after error does not re-render the component

[ardavank]

Intended outcome:
When I call refetch, I noticed that it actually makes the call to the server and grabs the data, but never calls the render on the component to update the data.

Actual outcome:
it should re-render the component

How to reproduce the issue:
I have the following component and I'm calling the refetch from the ErrorScreen Component
I have console.warn(this.props) in render function of both the parent component and the ErrorScreen Component, and non of them gets called when I call refetch():

    render() {
        console.warn(this.props);
        const { data: {refetch, loading, error, prices} } = this.props;

        if (error) {
            return <ErrorScreen {...this.props} />;
        }

        if (loading) {
            return <Spinner size="large" color="#ffffff" />;
        }

      return (<View>{data}</View>);
     }

Version
"apollo-cache-inmemory": "^1.1.4",
"apollo-client": "^2.0.4",
"apollo-client-preset": "^1.0.5",
"apollo-link-http": "^1.3.2",
"react-apollo": "^2.0.4",

[rosskevin]

@AWDGroup it would be great if you would PR a modification one of the tests (or add a new case) to prove the case. If you do, a fix is also welcome, but minimally a breaking test case is a big head start.

[ardavank]

@rosskevin I was doing more investigations on this and found out the following:

• this.props.data.refetch().then((res) => console.log(res)) will print out the new data
• I tried re-rendering the parent component after refetch, but the new data is not updated in the props and it still has the previous data object
• I looked at the refetch function on Github and it does not seem to actually re-render the component and pass the new data as props to it:
  https://github.com/apollographql/apollo-client/blob/800b10c8b71757e38b6567e7d3ef44ad36a35f07/packages/apollo-client/src/core/ObservableQuery.ts#L272

I'm not sure if this is by design or something is missing

[ardavank]

@rosskevin
I debugged the code and found out that the listeners in the queries become empty after an error:

https://github.com/apollographql/apollo-client/blob/800b10c8b71757e38b6567e7d3ef44ad36a35f07/packages/apollo-client/src/core/QueryManager.ts#L991

There is an existing comment in the code which is as follows:

// it's possible for the listener to be undefined if the query is being stopped
// See here for more detail: https://github.com/apollostack/apollo-client/issues/231

[rosskevin]

We are currently lean on feedback from other contributors due to the holidays.

I'm not yet familiar with the code, and the apollo-client docs don't make mention of rendering and rightfully so they are agnostic of the presentation framework.

So - my uninformed opinion - this sounds like a bug. Assuming you are staying on the same view for refetching, if react-apollo allows you to refetch, it should re-render the data, otherwise what's the use case?

[wgoodall01]

I'm experiencing this issue as well -- When a component connected with the graphql() HOC makes a request with a network error, any subsequent calls to data.refetch() will make a request and resolve with the result, but will not update the Apollo cache or re-render the child component.

[miksansegundo]

I'm having the same issue.

"apollo-client": "^2.0.4",
"react-apollo": "^2.0.4",

I confirm that the component doesn't update after refetch() when:

• the request returns an error status code
• the request returns a 200 status code but contains an error in list:
  { data: {}, errors: [{ERROR}] }

As a dirty workaround I manage to return a 200 status without errors in the response.

[miksansegundo]

I've reading several issues related with refetch, for instance after skip is not possible to refetch neither.

My case is related with the authentication. I'm using the graphql HOC to subscribe my Header and Footer components to the Apollo store. Those components must be updated after a query fetch the user data from the server.

The issue here is when the query returns an error because the user is not logged yet then the components are not subscribed to the query (I workarounded this not returning a network error and instead an error inside data).

Another issue is that I can not use skip based on a condition because that does not subscribe them neither so I have to do two requests that gets a fake error just to subscribe both components to the user data query.

I think my problem would be solved if I use the Apollo Link State to subscribe my components locally to a query that I can read and write locally. I have realized that I can not delegate the component update to the network response or error.

I hope this helps

[ardavank]

any update on this?

[dbelchev]

+1
@jbaxleyiii, can you please help on this one, also reproducible on react-apollo v1.4.16. Same behaviour with startPolling.

[wdimiceli]

I have a PR open with a fix.

There are a couple workarounds posted in apollo-client issue 2153.

Would like to get some feedback for the PR since this issue seems pretty widespread.

[fenok]

Since the PR is in master, how long will it take for it to appear on npm?

[404sand808s]

Looking for exactly this fix: need to propose user a way to re-establish connection during server errors. Confirming reproduction of the above.

[thomashoggard]

A fix or work around would be awesome. This flow seems common for most applications.

[tmeasday]

This issue is older than the code change that I've identified as a problem, but for some, this could be the explanation of the problem you are seeing: #2070

[rosskevin]

Closing in favor of #2070