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

Question

我正在应用程序中实现分页，除了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, {
                            {...}
                        });
                    }
                });
            },
        };
    },
};

Answer 1

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

notifyOnNetworkStatusChange: true

进入 graphql 配置中的选项。

像这样：

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