v3 - SSR - Queries render with loading: true even when data exists (Example repo provided)

Intended outcome: Using apollo getDataFromTree I expect the html produced by renderToString to not be in loading state.

Actual outcome: The query loading is true even when data is populated. So the component will hit the

if (loading) return <div>Loading</div>

How to reproduce the issue:

Here is a repo. You can see on the server renderToString() the loading value is true even though data is populated with the query result. You can also see window.__APOLLO_STATE__ is correctly populated with the result.

https://github.com/bretthadley/apollo-issue-demo

Versions

System:
    OS: macOS 10.15.5
  Binaries:
    Node: 14.3.0 - /usr/local/bin/node
    Yarn: 1.17.3 - ~/.yarn/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
  Browsers:
    Chrome: 83.0.4103.116
    Firefox: 68.0.2
    Safari: 13.1.1
  npmPackages:
    @apollo/client: ^3.0.2 => 3.0.2

[jimrandomh]

Looks like maapteh beat me to it (https://github.com/apollographql/apollo-client/issues/6651). I confirm that maapteh’s issue is the same as the one I referred to.

[jimrandomh]

There appear to be two related issues here, one server side and one client side. The server-side issue is renderToString not working; for our project (LessWrong), this made the SSR html blank. Using the return value from getDataFromTree works, and looks like the right solution, so this is mostly a documentation issue; the migration guide should say that renderToString is no longer suitable. Streaming may still be an issue, but we weren’t doing that before.

But there’s a second issue, which is client side. The first call to useQuery for a given query, with ssr: true, returns the correct data, but with loading: true. The cache is correctly pre-populated and no network request is sent, and it immediately does an update/rerender with loading:false, but all the extra rerendering has a noticeable performance imact.