apollographql / react-apollo

:recycle: React integration for Apollo Client
https://www.apollographql.com/docs/react/
MIT License
6.85k stars 787 forks source link

useQuery yields incorrect loading state during SSR #3962

Open cdaringe opened 4 years ago

cdaringe commented 4 years ago

Intended outcome:

useQuery to yield {loading: false, data: { ...data-from-cache... }}

Actual outcome:

useQuery yields {loading: true, data: { ...data-from-cache...}}

How to reproduce the issue:

an easily cloneable, runnable reproduction is found here: https://github.com/cdaringe/apollo-bad-ssr-state.

problem

on ssr the following events occur, ending in an incorrect SSR state:

by debugging in my component on SSR, useQuery went thru the following transitions in a single request:

  1. {loading: true, data: undefined}, on when first calling <App />
  2. {loading: false, data: CORRECT_DATA}, while getDataFromTree was awaiting useQuery to settle
  3. {loading: true, data: CORRECT_DATA}, on ReactDom::renderToString. blast! loading should be false 😢 .

Version

System: OS: macOS 10.15.4 Binaries: Node: 13.13.0 - ~/.nvm/versions/node/v13.13.0/bin/node Yarn: 1.19.1 - ~/.yarn/bin/yarn npm: 6.14.4 - ~/.nvm/versions/node/v13.13.0/bin/npm Browsers: Chrome: 81.0.4044.138 Firefox: 75.0 Safari: 13.1 npmPackages: @apollo/client: 3.0.0-beta.39 => 3.0.0-beta.39 @apollo/react-ssr: ^4.0.0-beta.1 => 4.0.0-beta.1

Shtokarev commented 4 years ago

Exactly the same behaviour @apollo/client: 3.0.0-beta.50