Apollo-client: Loading state stuck on true and network request is never made

[nlucero]

I'm having an issue using the graphql HOC. I'm receiving via props on my wrapped component an object with the variables that are used on the graphql query (let's call it the filters object). When an error occurs on the API, the data { error } prop is injected correctly into my wrapped component and contains the error that comes on the response. But, after this, when the query is re-run with different variables (due to the filters object being updated), graphql makes NO NETWORK REQUEST at all, and the data { loading } prop is stuck on true forever.

I've even tried setting the errorPolicy to all. But in that case, the data { error } prop always come as undefined (even when there are errors on the API response). Not sure if this is intended or another bug :stuck_out_tongue:

Here is my wrapped component (I'm using recompose):

const withData = graphql(caseInfoQuery, {
  options: ({ filters }) => ({
    variables: filters
  })
});

const enhance = compose(
  withData,
  defaultProps({ data: {} }),
  withProps(({ filters, data: { cases, loading, error } }) => ({
    cases,
    loading
  }))
);

export default enhance(MyDataTable);

I'm using these package versions:

"dependencies": {
    "apollo-cache-inmemory": "^1.1.3",
    "apollo-client": "^2.1.0",
    "apollo-link": "^1.0.5",
    "apollo-link-error": "^1.0.2",
    "apollo-link-http": "^1.3.0",
    ...
}

[nfantone]

Co-worker here.

I just wanted to emphasize that we are only seeing this behaviour _after_ the first GraphQL error occurs. If no errors arise, everything works as expected and the query is re-ran on component update. Also, we tried setting options.notifyOnNetworkStatusChange to true, with no avail.

[lluzak]

I think problem lies in use of zen-observablepackage in ObservableQuery. Whenever ObservableQuery return to subscriber error, it will not longer send any new updates, even if you use refetch. It happening because after calling error(value) function, it will close stream.

error(exception) Receives the terminating error of the sequence.

Example: https://codesandbox.io/s/7jnm1rm6x0

Also when subscribing again to ObservableQuery it will automatically on start return lastError, which is the reason infinity loading state.

if (observer.error && this.lastError) observer.error(this.lastError);

On of ways to fix it is to stop using error(value) function for passing Graphql and HTTP errors.

Please correct me if i'm wrong.

[nfantone]

@lluzak Think this is a very reasonable observation. It stands in line with our findings here.

[lluzak]

@nfantone , exactly, i hope one of contributors will take a look into it. For now i downgraded to previous version.

[nlucero]

@lluzak that makes a lot of sense. Great finding!

You said you downgraded to a previous version. Is it working fine there? What version are you using?

[lluzak]

@nlucero , i went back to [email protected] and it works correctly.

[dbelchev]

@lluzak I tested with [email protected] and it doesn't work for me, just as @nlucero describes.

[luccasmaso]

react-apollo@^2.1.0 fixes for me

[hwillson]

Hi all - this should be fixed in newer versions of react-apollo. If you're still encountering this issue after updating to a current version (2.1.4 as of today), please post back and let us know. Thanks!