fetchPolicy: 'cache-and-network' causes app to hang on 'Loading ...' if this.props.data.refresh() called from componentWillMount

[TheoMer]

OS: Windows 10 Pro apollo-client: 1.0.2

So, calling this.props.data.refresh() from componentWillMount, with a fetchPolicy: 'cache-and-network' in my query, causes my app to hang on Loading ..., after an load/reload. What is the issue here?

My initial query is:

const allPostsCommentsQuery = graphql(All_Posts_Comments_Query, {
  options: {
    cachePolicy: 'offline-critical', 
    fetchPolicy: 'cache-and-network',
  },
});

and my components are:

  render: function() {
    const { data } = this.props;
    if (data.loading) {
      return <p>Loading ...</p>;
    }
    if (data.error) {
      return <p>{data.error.message}</p>;
    }
    return (
      <div className="photo-grid">
        { data.allPostses.map( (post,i) => <Photo {...this.props} key={i} postIndexID={i} post={post} />) }
      </div>
    );
  }
});

export default PhotoGrid;

and

const Photo = React.createClass({

  componentDidMount: function () {
    if (this.props.data.loading === false){
      this.subscription = this.subscribeUpdateLikes();
    }
  },
  componentWillMount: function () {
    this.props.data.refetch().catch((err) => {
      console.log(err);
    });
  },
  subscribeUpdateLikes: function() {
    return this.subscriptionObserverLikes = this.props.data.subscribeToMore({
      ....
    });
  },
  getPostLikesQuery: function(idVal, postIndexID) {
    return this.props.client.query({
      ....
    })
  },
  render: function() {
    const { post, postIndexID, postId, key } = this.props;

    return (
      <figure key={postIndexID} className="grid-figure">
        <div className='grid-photo-wrap'>
          <Link to={`/view/${postIndexID}`}>
            <img className='grid-photo' src={post.displaysrc} alt={post.caption} />
          </Link>
          <CSSTransitionGroup transitionName="like" transitionEnterTimeout={500} transitionLeaveTimeout={500}>
            <span key={post.likes} className="likes-heart">{post.likes}</span>
          </CSSTransitionGroup>
        </div>
        <figcaption>
          <p>{post.caption}</p>
          <div className="control-buttons">
            <button onClick={this.getPostLikesQuery.bind(null, post.id, postIndexID)} className="likes">&hearts; {post.likes}</button>
            <Link to={`/view/${postIndexID}`} className="button">
              <span className="comment-count">
                <span className="speech-bubble"></span> {(post.comments ? Object.keys(post.comments).length : 0)}
              </span>
            </Link>
          </div>
        </figcaption>
      </figure>
    )
  }
  ....

[Poincare]

Could you use the Apollo Client devtools to see if the store is actually being updated with the result of the query on the client?

[stale[bot]]

This issue has been automatically marked as stale becuase it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions to Apollo Client!

[stale[bot]]

This issue has been automatically closed because it has not had recent activity after being marked as stale. If you belive this issue is still a problem or should be reopened, please reopen it! Thank you for your contributions to Apollo Client!