Apollo-client: v3.0: loading: true for first render always, even if all data is available in cache

[nsmith7989]

Intended outcome:

Attempting to upgrade to @apollo/[email protected] but I found that my application was rendering a lot more often than it was in 2.0. We have several components that are hooked into the same query, they usually only render once if the query has already completed earlier.

Actual outcome:

In 3.0 it appears that every query will have loading: true even if the cache data can satisfy the query. It will then immediately re-render with loading: false

How to reproduce the issue:

I recreated the 3.0 issue here: https://codesandbox.io/s/serene-yalow-lvfm9 look at the console and you'll observe the behavior.

Compared to 2.0: https://codesandbox.io/s/determined-galois-e1w2w if you look at the console the same query only renders 1 time with loading: false

Versions

@apollo/[email protected]

[nsmith7989]

This is likely the same underlying issue as #6651, but this is reproducible without a SSR setup.

[MaxHogervorst]

Same issue without SSR

[benjamn]

@nsmith7989 Thanks for the reproduction (it really helps), but I'm not seeing how the data is already available in the cache. I agree we should be able to return a complete loading: false cache result if there is adequate data in the cache. Could you modify the reproduction to do cache.restore(data) using data obtained separately from cache.extract(), so it's actually testing the warm-cache case?

[nsmith7989]

@benjamn not completely sure I'm following. In the reproduction above the cache is primed because a parent component ran a query and returned a loading indicator while it was in flight. After parent gets back loading: false it renders children, which happens to run the exact same query as the parent.

My assumption is that the parent component primed the cache and the child is essentially reading from the cache.

In 2.0 the scenario we get is loading: false and data. In 3.0 the first render is loading: true and data from the cache, then a second render where loading: false

[benjamn]

@nsmith7989 Ack, sorry, I see how that works now. No need to update the repro. We'll take a look and get back to you soon.

[benjamn]

@nsmith7989 This issue should be fixed in @apollo/[email protected], thanks to #6710, if you want to give it a try. Here's an updated version of your reproduction that seems to show the desired loading: false behavior: https://codesandbox.io/s/dazzling-snow-6vvx3

[nsmith7989]

Thanks @benjamn. I can confirm that this looks good in the reproduction.

I will try it on my own app @apollo/[email protected] and let you know if I find issues.

[cecchi]

We've tested on our own large React codebase and 3.1.0-pre.3 seems to do the trick to fix our SSR-hydration issues. Thanks @benjamn!

[benjamn]

Following up: we just published @apollo/[email protected] to npm!