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