React Apollo 客户端未使用 fetchMore() 更新加载标志。为什么？答案

【问题标题】：React Apollo client not updating loading flag using fetchMore(). Why?React Apollo 客户端未使用 fetchMore() 更新加载标志。为什么？
【发布时间】：2017-09-19 04:00:12
【问题描述】：

我正在应用中实现分页，除了loading 标志在fetchMore 操作期间没有更新之外，一切正常。

似乎fetchMore 在返回之前不会导致重新渲染，这意味着标志永远不会更改为true。

我已将我的代码建模为与以下位置的偏移/限制示例非常接近：http://dev.apollodata.com/react/pagination.html

有一些类似的问题涉及跟踪某些状态，但我不希望添加更多标志并使用提供的标志。

...
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, {
                            {...}
                        });
                    }
                });
            },
        };
    },
};

【问题讨论】：

标签： reactjs graphql react-apollo

【解决方案1】：

我有同样的问题，我通过设置解决了它

notifyOnNetworkStatusChange: true

进入 graphql 配置中的选项。

像这样：

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

【讨论】：