Apollo-client: loading is false | fetchMore

Created on 22 Apr 2017 · 5Comments · Source: apollographql/apollo-client

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.

[email protected]
[email protected]

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>
    );
  }
}

Source

seeden

👍6

Most helpful comment

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

cesarsolorzano on 27 Apr 2017

👍35 🎉24 ❤8

All 5 comments

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

cesarsolorzano on 27 Apr 2017

👍35 🎉24 ❤8

thanks @cesarsolorzano it is working fine with notifyOnNetworkStatusChange.

seeden on 27 Apr 2017

🎉8

@cesarsolorzano Thanks! I was really frustrated by apollo's docs.

KarandikarMihir on 27 Jul 2018

👍4

Still confused; the apollo client (not react, just the client) has a loading property on the query result that's always true, but... the only way I found to specify notifyOnNetworkStatusChange anywhere was on the watchQuery method, which is not what I want.

So.... how can I use loading with the query method? Can I? Couldn't find anything obvious by browsing the source code.