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

Posted 2023-03-08

【中文标题】React-Apollo Query 组件变量永远不会更新

【英文标题】：React-Apollo Query component variables never update

【发布时间】：2019-01-12 12:51:54

【问题描述】：

我正在尝试将图表组件包装在检索图表数据的<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>
  ) 

这是我正在经历的步骤：

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。

【讨论】：

我使用渲染道具方法作为@dkulkarni，还遇到了组件变量不更新的问题。在我重写为 hoc 模式后，它起作用了。但是，我认为首选的方法是使用渲染道具方法？ Apollo 网站的示例都是使用渲染 props 的方式

它们在开始时更简单，并且适用于（也许）一半的用例，但您很快就会陷入渲染查询/变异组件的地狱。你能想象一个带有 fetchMore 的组件和查询以及使用查询/突变组件完成的三到四个可能的突变吗？添加一个本地状态和一些事件处理程序，一些条件渲染和 redux ... :D 组件应该很简单，否则应该重构。

我同意你的看法。它可能会变成一团乱七八糟的代码。我个人更喜欢 HOC 模式。

... 你可以使用所有 react 的组件生命周期方法。点赞？回答或删除您自己的问题？

我相信 react hooks 和 suspense 会在未来结合渲染 props 的方式在功能组件中提供生命周期方法。我还没有玩过，所以不确定这是否会产生更清晰的代码