React-Apollo Query 组件变量永远不会更新

Question

我正在尝试将图表组件包装在检索图表数据的<Query> 组件中。图表组件使用Query 的fetchMore 渲染道具通过更新查询的变量将新数据附加到图表。

我遇到的问题是，在使用更新的变量参数运行 fetchMore 之后，Query 组件的渲染道具似乎永远不会更新 variables 参数。

这是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>
  ) 
}

这是我正在经历的步骤：

1. render prop 使用 from = 0、to = 29 和 chartData 作为 30 个数据点的数组运行
2. 触发 fetchMore。使用from = 30、to = 59 再次运行查询。响应返回 30 个新数据点。 updatedResult 是完整的 60 个数据点。
3. 渲染道具再次运行。 chartData 是一个包含 60 个数据点的数组，正如预期的那样，但 from = 0 和 to = 29 仍然如此。我希望它们分别更新到30 和59。这会导致图表的 xMin 和 xMax 错误，因为变量没有更新。

作为一种解决方法，我尝试在updateQuery 回调中设置from 和to 的组件状态副本，但这会导致from 和to 的值与chartData 不同步直到 Apollo 完成对其商店的更新。

非常感谢任何帮助。谢谢！

Answer 1

从某种程度的复杂性来看，渲染 fn 不适合......除了视图之外的任何东西。

看看https://github.com/sysgears/apollo-universal-starter-kit/blob/master/packages/client/src/modules/post/containers/Post.jsx - 关注点（查询/容器/组件）的分离很好，示例涵盖了 fetchMore。