refetching a query with react-apollo: why is `loading` not true?

Question

I'm trying Apollo and using the following relevant code:

const withQuery = graphql(gql`
query ApolloQuery {
  apolloQuery {
    data
  }
}
`);

export default withQuery(props => {
  const {
    data: { refetch, loading, apolloQuery },
  } = props;

  return (
        <p>
          <Button
            variant="contained"
            color="primary"
            onClick={async () => { await refetch(); }}
          >
            Refresh
          </Button>
          {loading ? 'Loading...' : apolloQuery.data}
        </p>
  );
});

The server delays for 500ms before sending a response with { data: `Hello ${new Date()}` } as the payload. When I'm clicking the button, I expect to see Loading..., but instead the component still says Hello [date] and rerenders half a second later.

According to this, the networkStatus should be 4 (refetch), and thus loading should be true. Is my expectation wrong? Or is something regarding caching going on that is not mentioned in the React Apollo docs?

The project template I'm using uses SSR, so the initial query happens on the server; only refetching happens in the browser - just if that could make a difference.

Answer 1

I think that you need to specify notifyOnNetworkStatusChange: true in the query options (it's false by default).