0
私はアプリ内でページ分割を実装しており、fetchMore
操作中にloading
フラグが更新されていないこと以外はすべて動作します。React Apolloクライアントは、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, {
{...}
});
}
});
},
};
},
};