React Apollo客户端不使用Fetchmore()更新加载标志.为什么

Question

我正在应用程序中实现分页，除了 loading flag在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 Config。

中的选项

这样：

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