React Apollo client not updating loading flag using fetchMore(). Why?

Question

I am implementing pagination in an app and everything works except the loading flag is not updating during the fetchMore operation.

It seems that fetchMore doesn't cause a re-render until it returns, which means the flag never changes to true.

I have modeled my code closely to the offset/limit example at: http://dev.apollodata.com/react/pagination.html

There are some similar questions that involve keeping track of some state, but I would prefer not to add more flags and use the one provided.

...
render () {
    if (!this.props.loading) {
        const hasNext = false);
        const canLoadMore = hasNext && !this.props.loading;

        return (
                <div>
                    ...
                    <LoadMoreButton
                        onHandleLoadMore={this.props.handleLoadMore}
                        canLoadMore={canLoadMore}
                        loading={this.props.loading} // <- this doesn't change because component doesn't re-render until results are back
                    />
                </div>
            );
    }
}
...
const queryOptions = {
    options: props => ({
        variables: {
            offset: 0,
            limit: 5,
        }
    }),
    props ({ data: { loading, fetchMore } }) {
        return {
            loading,
            handleLoadMore () {
                return fetchMore({
                    variables: {
                        offset: nextOffset,
                        limit: limit,
                    },
                    updateQuery: (previousResult, { fetchMoreResult }) => {
                        if (!fetchMoreResult) {
                            return previousResult;
                        }


                        return update(previousResult, {
                            {...}
                        });
                    }
                });
            },
        };
    },
};

Enerikes · Accepted Answer · 2017-09-04 14:14:36Z

5

I had same issue and i solved it by setting

notifyOnNetworkStatusChange: true

into option in graphql config.

Like this:

options: () => ({
        variables: {
            count: 10,
            current: 1
        },
        fetchPolicy: 'network-only',
        notifyOnNetworkStatusChange: true
    })

answered Sep 4, 2017 at 14:14

Enerikes

852 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Apollo client not updating loading flag using fetchMore(). Why?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related