React-apollo: receiving `Loading:true` instead of data after unmounting, `client.resetStore()`, then mounting again

[c0d0g3n]

I created a repo that reproduces this issue: https://github.com/c0d0g3n/apollo-reset-issue

The detailed description is in README.md, as well as copied below:

React Apollo resetStore issue

Anatomy of the app

This app was quickly assembled together with create-react-app.
Four files are important:

File | Description
--- | ---
DataComponent.jsx | Simple list component that displays messages from graphcool api (managed by react-apollo)
ToggleComponent.jsx | Link that (un)mounts DataComponent.jsx when clicked
ResetComponent.jsx | Link that calls client.resetStore() when clicked
app.jsx | Root component

Getting started

1. Download this repo (git clone https://github.com/c0d0g3n/apollo-reset-issue.git)
2. Install the app (yarn install)
3. Start the app (yarn start) (it should open in you preferred browser automatically)

Reproduce

1. A list of messages is loaded from the Graphcool endpoint via react-apollo
2. Click on hide <Data/> (the list of messages will unmount)
3. Click on reset Apollo
4. Click on show <Data/>

Observed behavior

After mounting <Data/> (which triggers a graphql query), unmounting <Data/>, resetting Apollo and mounting <Data/> again, the result of the second query is never propagated to the component that asked for it. Instead, it is rerendered twice with loading: true and no payload (first time to be expected).

Note that the query seems to execute properly (APOLLO_QUERY_RESULT with valid data is dispatched).

Expected behavior

The second rerender of <Data/> should yield a payload (in the app's case, this.props.data.allmessages should contain the result of the server), loading should be false.

This issue may be related to https://github.com/apollographql/react-apollo/issues/718

[fauxparse]

I'm seeing this too, but it happens roughly half the time in my app, with the other times behaving as expected.

[andrewlinfoot]

Had the same issue. It's kind of hard to reproduce consistently but I think I was able to fix it by setting the cache policy to cache-and-network for the first query called after reset.

[c0d0g3n]

@fauxparse, @andrewlinfoot thanks for your responses. My reproduction case seems to work every time. I hope some project maintainer can help. I'll see if I can make something work with cache-and-network.

[ducngtuan]

@c0d0g3n I got the similar issue i think, and i think it might be the issue here: https://github.com/apollographql/apollo-client/issues/1186#issuecomment-324260171
Try setting notifyOnNetworkStatusChange: true inside the options: {} of the graphql call to see if it fixes the problem.

[fauxparse]

@ducngtuan Wait, never mind, I wasn't specifying the option correctly. I think this works!

[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!

[stale[bot]]

This issue has been automatically closed because it has not had recent activity after being marked as no recent activyt. If you belive this issue is still a problem or should be reopened, please reopen it! Thank you for your contributions to React Apollo!

[leethree]

I'm seeing the exact same issue. notifyOnNetworkStatusChange: true workaround works for me but not sure if it will cause side effects. Would like to see the root cause addressed.