如何使用轮询方法获取新边缘

Question

我正在尝试进行无限滚动，只需增加第一个值即可正常工作。但是，我想获取开头前面的新边。如何在不强制取取的情况下做到这一点？

这是我的 RelayContainer，其中 firstLoad 和 afterFirst 使用别名引用具有不同参数的相同连接。中继不会查询之前的任何内容。我还从 graphql 服务器端强行将 hasNextPage 和 hasPreviousPage 设置为 true

中继如何决定是否从服务器获取新的边缘

  constructor(props) {
    super(props);
    if (!props.viewer) {
      this.handleLogout();
      console.log('Access expired.');
      return;
    }
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => {
      return r1.cursor !== r2.cursor;
    }});
    this.state = {
      dataSource: ds.cloneWithRows(props.viewer.firstLoad.edges),
    };
  }
  componentWillMount() {
    // Set up to query for newly received messages
    const {edges} = this.props.viewer.firstLoad;
    this.props.relay.setVariables({
      last: edges.length,
      before: edges[edges.length - 1].cursor,
    });
  }
  componentDidMount() {
    this._interval = setInterval(() => {
      this.props.relay.setVariables({
        last: this.props.relay.variables.last + 10,
      });
    }, 2000);
  }
  componentWillReceiveProps(nextProps) {
    const {edges} = nextProps.viewer.afterFirst;
    if (edges) {
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(edges),
      });
    }
  }

Answer 1

我已经成功地解决了我的需求，方法是创建一个在光标/时间戳之后返回新项目的新字段，并手动维护一个用于显示的数据数组，由来自 Relay 的数据填充。

一个关键的要点是将变量与一些随机数据连接起来，以便 setVariables 向服务器而不是缓存发出请求。

startPolling() {
  this._timer = setTimeout(() => {
    this.props.relay.setVariables({
      lastCreatedAt: `${this._lastCreatedAt}:${new Date().getTime()}`,
    });
    this.startPolling();
  }, 5000);
}