Next.js: with-apollo: client-side routing not preloading data

[timojokinen]

Examples bug report

Example name

with-apollo

Describe the bug

Preloading data only works server side. When using client side routing the data from the tree is not preloaded which results in the page rendering before the data was loaded. Again this results in "flashing" / "jumping" of the content because we need to display a loading indicator.

To Reproduce

1. Clone the with-apollo example and run it
2. Go to the about page
3. Navigate from about page to index page
4. Loading indicator shows for a few milliseconds before showing actual loaded content

Expected behavior

I'd expect the same behavior for client side routing as for server side rendering or at least an opt-in option. History pushState should happen only after the data has been loaded from the subtree.
As the NextJS documentation states:

Client-side routing behaves exactly like the browser:

1. The component is fetched.
2. If it defines getInitialProps, data is fetched. If an error occurs, _error.js is rendered.
3. After 1 and 2 complete, pushState is performed and the new component is rendered.

[Timer]

This is the expected behavior -- you'll need to adjust the custom app to always prefetch data if that's what you want.

https://github.com/zeit/next.js/blob/canary/examples/with-apollo/lib/with-apollo-client.js

[lifeiscontent]

@Timer I seem to be getting a GraphQL error occurred [getDataFromTree] Invariant Violation: ReactDOMServer does not yet support Suspense. after I've set this up. Any ideas?

[yxwu]

@Timer, I am kind of confused.
I had thought once preload data arrives from server (by __NEXT_DATA__), it will be saved to apollo store, then the <Query> in render() will immediately get the data instead of being in 'loading' state for a while. Am I wrong?
And actually I encounter a similar issue: after loading a page from server (SSR loading), I could see the Query data in __NEXT_DATA__, however, the <Query> in render() still stays in 'loading' state for a while, seems the preloaded data doesn't work at this time. While the behavior is not like this on Next.js ver 8.1.0, seems this issue (behavior) is introduced with Next.js ver 9.
Please shed some light on this issue.
Thanks a lot.