Cache-first always returns NetworkStatus 7

Intended outcome: Show a spinner(loading: true) until data is loaded when I load the page for the first time and subsequent times load from cache.

Actual outcome: According to the console log statements (called twice). Also if i set the fetchPolicy to network-only or cache-and-network it works as intended

data: {...}
loading: false
networkStatus: 7

code snippet

<Query query={CURRENT_USER_QUERY}>
        {({ data, loading }) => {
          return (
            <div>
              {!loading &&
                <Query
                  query={CALENDAR_QUERY}
                  variables={{ id: data.user.business.id }}
                  fetchPolicy='cache-first'
                >
                  {data => {
                    console.log(data)
                    // return (
                    //   <div>
                    //     {!loading &&
                    //       !error &&
                    //       <NoSSR>
                    //         <Calendar {...props} business={data.business} />
                    //       </NoSSR>}
                    //     {loading &&
                    //       !error &&
                    //       <SpinnerStyles>
                    //         <Spin size='large' tip='Loading events' />
                    //       </SpinnerStyles>}
                    //   </div>
                    // )
                    return null
                  }}

                </Query>}
              {loading && !error && <Spin size='large' tip='Loading events' />}
            </div>
          )
        }}
</Query>

Versions

  System:
    OS: macOS High Sierra 10.13.6
  Binaries:
    Node: 10.12.0 - /usr/local/bin/node
    Yarn: 1.10.1 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 70.0.3538.102
    Safari: 11.1.2

[eugene-kim]

Also seeing this on @apollo/client version 3.0.2

[kedarguy]

I am also seeing this after upgrading to apollo-client 2.6.4 (from 2.3.8 where I didn’t have this problem)