Apollo-client: [3.0-beta] SSR's getDataFromTree(): queries resolved from cache have networkStatus set to loading

Created on 24 Jan 2020 · 5Comments · Source: apollographql/apollo-client

Intended outcome:

getDataFromTree() should populate cache with queries data, so that during final render on the server all server-side queries resolve data from cache, instead of firing off network call, and therefore rendering in loading state.

{
    "data": "<Query Data Goes here>",
    "error": undefined,
    "loading": false,
    "networkStatus": 7
}

> getDataFromTree() pass - start
> { data: false, error: false, loading: true, networkStatus: 1 }
> { data: true, error: false, loading: false, networkStatus: 7 }
> getDataFromTree() pass - end
> { data: true, error: false, loading: false, networkStatus: 7 }

Actual outcome:

While cache is fulfilled with queries data as expected, the queries themselves have networkStatus set to loading. Which is not intended outcome, as the data is ready (pulled from cache), and there's no network request inflight.

{
    "data": "<Query Data Goes here>",
    "error": undefined,
    "loading": true,
    "networkStatus": 1
}

> getDataFromTree() pass - start
> { data: false, error: false, loading: true, networkStatus: 1 }
> { data: true, error: false, loading: false, networkStatus: 7 }
> getDataFromTree() pass - end
> { data: true, error: false, loading: true, networkStatus: 1 }

How to reproduce the issue:

You can find reproduction here https://github.com/shYkiSto/apollo-client-beta-3-ssr:

git clone [email protected]:shYkiSto/apollo-client-beta-3-ssr.git
cd apollo-client-beta-3-ssr && npm install && npm run start
open http://localhost:3000/

or, SSR with Next.js found here: https://github.com/shYkiSto/apollo-client-beta-3-ssr/tree/next-js:

git clone --branch next-js [email protected]:shYkiSto/apollo-client-beta-3-ssr.git
cd apollo-client-beta-3-ssr && npm install && npm run dev
open http://localhost:3000/
check server console output to capture query state changes, or disable JS in your browser to assess server-side renderer result

Versions

  System:
    OS: macOS Mojave 10.14.6
  Binaries:
    Node: 12.12.0 - /usr/local/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.11.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 77.0.3865.90
    Firefox: 69.0.1
    Safari: 13.0.4
  npmPackages:
    @apollo/client: ^3.0.0-beta.25 => 3.0.0-beta.25 
    @apollo/react-ssr: ^4.0.0-beta.1 => 4.0.0-beta.1

Source

shYkiSto

👍2

Most helpful comment

I'm not a fan of "me too" comments, but since 3.0 has been released I thought people would like to know that this issue is still present in 3.0.

TimonVS on 15 Jul 2020

👍5 👀1

All 5 comments

@benjamn @hwillson wanted to bring this issue to your attention if you are not already aware. Let me know if the description for this issue is misleading, I will be happy to update it

shYkiSto on 30 Jan 2020

According to this issue, it's because getDataFromTree doesn't run in the browser any longer.

https://github.com/lfades/next-with-apollo/issues/84