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

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

解决了这个问题

buildType

到graphql config中的选项。

像这样：

notifyOnNetworkStatusChange: true

React Apollo客户端不使用fetchMore（）更新加载标志。为什么？

1 个答案: