loading is false | fetchMore

Apollo’s “loading” is always false when I use fetchMore. I am using two “loading” states as you can see in the example. First one “loading” is from apollo and it is false when I try to use fetchMore. Second is “loadingMoreItems” and it is working fine because it is using state.

apollo-client@1.0.4 react-apollo@1.1.0

const GET_QUIZZES_QUERY = gql`
  query getQuizzes($cursor: String) {
    quizzes(cursor: $cursor) {
      id
      publishedAt 
      data
    }
  }
`;

@graphql(GET_QUIZZES_QUERY, {
  options: ({ location: { query } }) => ({
    variables: {
      cursor: null,
    },
  }),
  props: ({ data: { loading, quizzes, fetchMore }, ownProps: { location: { query } } }) => ({
    loading,
    quizzes,
    async loadMoreQuizzes() {
      return fetchMore({
        query: getQuizzes,
        variables: {
          cursor: quizzes && quizzes.length && quizzes[quizzes.length - 1].publishedAt,
        },
        updateQuery: (previousResult, { fetchMoreResult }) => {
          const previousQuizzes = previousResult.quizzes;
          const newQuizzes = fetchMoreResult.quizzes;

          return {
            quizzes: [...previousQuizzes, ...newQuizzes],
          };
        },
      });
    },
  }),
})
export default class Index extends Component {
  static propTypes = {
    loading: PropTypes.bool.isRequired,
    quizzes: PropTypes.array,
    loadMoreQuizzes: PropTypes.func.isRequired,
  };

  state = {};

  onLoadMore = async () => {
    const { loading } = this.props;
    if (loading) {
      return;
    }

    this.setState({
      loadingMoreItems: true,
    });

    await loadMoreQuizzes();

    this.setState({
      loadingMoreItems: false,
    });
  }

  render() {
    const { location: { query }, quizzes, loading } = this.props;
    const { redirectTo, loadingMoreItems } = this.state;
      return (
        <Redirect to={redirectTo} />
      );
    }

    console.log(loading, loadingMoreItems);

    const hasQuizzes = Boolean(quizzes && quizzes.length);

    return (
      <View className={style.root}>
 
        <Container>
          {hasQuizzes && (
            <Row>
              {quizzes.map(quiz => (
                <Column sm={3} key={quiz.id}>
                  <QuizThumb quiz={quiz} />
                </Column>
              ))}
            </Row>
          )}

          <Waypoint
            key={123}
            onEnter={this.onLoadMore}
          />

          {(loading || !!loadingMoreItems) && <Loading />}
        </Container>
      </View>
    );
  }
}

[cesarsolorzano]

@seeden what about if you add notifyOnNetworkStatusChange: true to your options?

[seeden]

thanks @cesarsolorzano it is working fine with notifyOnNetworkStatusChange.