我正在尝试将图表组件包装在检索图表数据的 <Query> 组件中 . 图表组件使用 Query 的 fetchMore 渲染道具通过更新查询的变量将新数据附加到图表 .
The problem I'm having is that the Query component's render prop never seems to update the variables argument after fetchMore is run with an updated variables argument.
这是 react-apollo 的错误，还是我错误地使用_1435613？
这是图表的渲染功能：
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>
)
}
这是我要经历的步骤：
-
render prop与
from = 0，to = 29和chartData作为30个数据点的数组运行 -
触发fetchMore . 查询再次使用
from = 30，to = 59运行 . 回复带来30个新数据点 . updatedResult是完整的60个数据点 . -
渲染道具再次运行 .
chartData是一个包含预期的60个数据点的数组，但仍然是from = 0和to = 29. 我希望他们分别更新到30和59. 这会导致图表具有错误的xMin和xMax，因为变量未更新 .
作为一种解决方法，我尝试在 updateQuery 回调中设置 from 和 to 的组件状态副本，但这会导致 from 和 to 值与 chartData 不同步，直到Apollo完成更新其存储 .
任何帮助是极大的赞赏 . 谢谢！
1 回答
从某种程度的复杂性来看，fn不是...除了视图之外的其他任何东西 .
看看https://github.com/sysgears/apollo-universal-starter-kit/blob/master/packages/client/src/modules/post/containers/Post.jsx - 关注点（查询/容器/组件）有很好的分离，例子包括fetchMore .