Stale props when changing variables

[pljeskavica]

Intended outcome:
graqphl higher order component should update props like loading when api requests come back.

Actual outcome:
grapqhl higher order component will not update props after changing the variables multiple times and the request comes back with no data (null, or empty array).

How to reproduce the issue:
I created a small example here: https://codesandbox.io/embed/3k067v2711

Instructions on recreating issue in codesandbox:

• Reload the sandbox
• Type into the input at the top: ca
• Change input text to: cd
• Change input text to: cr

Now the loading status will be stuck on true

The problem does not happen if you type in cr first.

If i pass in notifyOnNetworkStatusChange the problem will go away but that creates other problems with polling where the current data disappears when loading the next poll request.

I have tried this with the Query component as well and it does not resolve the issue.

Version

• [email protected]
• [email protected]
  OR
• [email protected]
  OR
• [email protected]

[clayne11]

Is this the same issue as #2202?

[pljeskavica]

@clayne11 I dont beleive so. The issue described there is that the props are from a previous query while loading a new one.
The issue I am describing is that the props change to reflect the loading state but do not resolve when the network request is completed. So my loading prop is stuck true and data comes back.

[OurMajesty]

Was having same issue, but never have been able to create reproducible example.
But the problem is with skip, even when it's not returns false. If you delete / comment it (line 77 in example), everything works fine.
So instead of query skipping, I had to just don't show results, until input is apt.

[pavanmehta91]

Having the same issue. Query render prop won't re-render and the loading remains true despite the variable change.

[pavan-shipmnts]

I worked for me in the render prop after upgrading react-apollo to 2.5.1. I also upgraded all the other apollo-client and apollo-link related packages.

[pljeskavica]

@pavan-shipmnts I updated my example to use [email protected] and the issue persists.

[pavanmehta91]

I actually changed the fetchPolicy to network only. pavan-shipmnts and I are the same guy.

[OurMajesty]

The error is still relevant in [email protected] and "skip fix" is still helps. Maybe it is the same error as in #2899.

[hwillson]

React Apollo has been refactored to use React Hooks behind the scenes for everything, which means a lot has changed since this issue was opened (and a lot of outstanding issues have been resolved). We'll close this issue off, but please let us know if you're still encountering this problem using React Apollo >= 3.1.0. Thanks!