我正在尝试将图表组件包装在用于检索图表数据的<Query>组件中。图表组件使用Query的{{1}}渲染道具通过更新查询的变量将新数据追加到图表。
我遇到的问题是，在使用已更新的变量参数运行fetchMore之后，查询组件的渲染道具似乎从未更新过variables参数。
这是fetchMore的错误，还是我错误地使用了react-apollo？
这是图表的渲染功能：
fetchMore这是我要执行的步骤：
render() {
return (
<Query
query={gql`
query Chart($from: Long!, $to: Long!) {
chartData(from: $from, to: $to) @connection(key: "chartData") {
...
}
}
`}
variables={{ from: this.props.from, to: this.props.to }}
>
{({ data: { chartData } = {}, variables: { from, to }, fetchMore }) => {
const fetchNext = () =>
fetchMore({
variables: { from: from + 30, to: to + 30, },
updateQuery: (previousResult, { fetchMoreResult }) => {
const updatedResult = Object.assign({}, fetchMoreResult)
updatedResult.chartData = [
...previousResult.chartData,
...fetchMoreResult.chartData,
]
return updatedResult
},
})
return (
<Chart
chartData={chartData}
from={from}
to={to}
fetchNext={fetchNext}
/>
)
}}
</Query>
)
}
，from = 0和to = 29作为30个数据点的数组运行chartData，from = 30运行。响应返回30个新数据点。 UpdatedResult是完整的60个数据点。to = 59是60个数据点的数组，符合预期，但chartData和from = 0仍然如此。我希望它们分别更新为to = 29和30。这会导致图表的xMin和xMax错误，因为未更新变量。作为一种解决方法，我尝试在59回调中设置from和to的组件状态副本，但这会导致updateQuery和from值与to不同步，直到Apollo完成更新其商店为止。
任何帮助将不胜感激。谢谢！
答案 0 :(得分：0)
从某种程度上讲，渲染fn对于...来说不是查看的好地方。
看看https://github.com/sysgears/apollo-universal-starter-kit/blob/master/packages/client/src/modules/post/containers/Post.jsx-关注点（查询/容器/组件）之间有很好的分离，示例覆盖了fetchMore。