如何使用 createRefetchContainer 更新变量？答案

【问题标题】：How to update variables using createRefetchContainer?如何使用 createRefetchContainer 更新变量？
【发布时间】：2018-01-12 21:55:11
【问题描述】：

由于 React Relay createPaginationContainer 不支持基于偏移的分页，下一个最佳选择是通过使用 createRefetchContainer 来处理此功能。

在 Relay Modern 文档https://facebook.github.io/relay/docs/refetch-container.html 上提供的示例中，实施时将向前分页一次，但这仅仅是因为我们正在从偏移量 0 处的默认状态转换到新状态 0 + 10。随后的点击事件产生相同的结果，因为值没有被存储。

我原以为偏移值会继续增加，但似乎并没有在每次重新获取时都保持状态。

我在回购中遇到了这个问题，它似乎已经解决了这个问题，https://github.com/facebook/relay/issues/1695。如果是这种情况，则说明文档尚未更新。

【问题讨论】：

标签： reactjs relayjs relay relaymodern

【解决方案1】：

虽然我认为应该有一个内置机制来解决这个问题，但我最终还是将值存储在状态中并使用回调来触发我的重新获取。

因此，在我从文档中列出的上述示例中，更新似乎发生在此处：

_loadMore() {
  // Increments the number of stories being rendered by 10.
  const refetchVariables = fragmentVariables => ({
    count: fragmentVariables.count + 10,
  });
  this.props.relay.refetch(refetchVariables, null);
}

所以我对这个特定示例的问题是我们正在从 fragmentVariable 中提取默认状态，因此本质上没有发生真正的变化。根据您的实现，这可能是可以接受的，但我认为对于大多数用例，我们希望看到值作为更新片段中的变量实际更新。

所以我在基于偏移的分页方面处理这个问题的方式是......

_nextPage = () => {
  if ((this.state.offset + this.state.limit) < (this.state.total - this.state.limit) {
    this.setState({ offset: (this.state.offset + this.state.limit), () => {
      this._loadMore();
    }
  }
}

_loadMore = () => {
  const refetchVariables = {
    offset: this.state.offset,
    limit: this.state.limit
  }
  this.props.relay.refetch(refetchVariables, null);
}

可能有一个错字，我现在并没有真正查看我的代码。但是通过使用组件的状态，您将能够有效地更新 refetchContainer 的变量。

【讨论】：