useApolloNetworkStatus() doesn't react on query?

[github0013]

function GlobalLoadingIndicator() {
  const status = useApolloNetworkStatus()
  console.log("status.numPendingQueries", status.numPendingQueries)
  if (status.numPendingQueries > 0) {
    return <p>Loading …</p>
  } else {
    return null
  }
}

const App = () => {
  const { loading, error, data } = useQuery(Query)
  console.log("loading", loading)
  console.log("data", data)

  return <></>
}

expected

• status.numPendingQueries 0
• loading true
• data undefined
• status.numPendingQueries 1
• loading false
• data {GenreCollection: Array(19)}
• status.numPendingQueries 0

Order might be different, but I at least was expecting status.numPendingQueries would become 1, but it never happens.

actual

codesandbox

https://codesandbox.io/s/typescript-react-material-ui-5zxqh

I copied the sample code from readme, and added App to it. How is my code not running properly?

[amannn]

Thanks for the report!

Yes, this is a known limitation at this point. I think this is a duplicate of #19.

The topic is a bit tough because Apollo fetches data during render which is before the subscription is set up (useEffect). I've wrote about some potential solutions here: #19 (comment).

Thank you for the reproduction!