RelayJS 无限滚动

Question

我正在尝试在我的 React-Relay 前端进行无限滚动分页，但没有成功。

此刻，我有了这个 React 组件……

class List extends Component {
  state = { loading: false };

  componentDidMount() {
    window.onscroll = () => {
      if (!this.state.loading
              && (window.innerHeight + window.scrollY)
              >= document.body.offsetHeight) {

        this.setState({loading: true}, () => {
          this.props.relay.setVariables({
            count: this.props.relay.variables.count + 5
          }, (readyState) => {
            if (readyState.done) {
              this.setState({ loading: false });
            }
          });
        });
      }
    }
  }

  render() {
    return (
      <div>
        {this.props.viewer.products.edges.map(function(product, i) {
          return (<Item key={i} product={product.node} />);
        })}
      </div>
    );
  }
};

...包裹在中继容器中

export default Relay.createContainer(List, {
  initialVariables: {
    count: 5
  },
  fragments: {
    viewer: () => Relay.QL`
      fragment on Viewer {
        products(first: $count) {
          total
          edges {
            node {
              ${Item.getFragment('product')}
            }
          }
        }
      }
    `,
  }
});

这背后的逻辑似乎很简单。如果您到达某个 scrollY 位置，请将新的增量值设置为 count 变量，这会扩展您的边列表。

但是这个概念会导致一种情况，一开始我在数据库中查询前 5 条记录，但最近我不断滚动查询 N+5 条记录。最后我会在数据库中查询整个表（数千条记录）！这是非常不可接受的。

所以我正在尝试实现cursors，但我不知道如何从连接中获取数据并扩展结果。这种方法返回给我一个 “分页” 列表。

---

另外，当我向下滚动时，上面的代码给了我这个错误

resolveImmediate.js?39d8:27 Uncaught Invariant Violation: performUpdateIfNecessary: Unexpected batch number (current 19, pending 18)

我将非常感谢任何帮助或示例！

Answer 1

问题解决了！

关于我每次滚动一次又一次地获取 N+5 记录的问题，Relay 似乎非常智能，因为它通过查询 cursor 和管理自动“分页”我的连接我的连接中的after arg。

在我的后端 graphql-sequelize 的帮助下，它只是变成了这个查询

SELECT ... FROM product ORDER BY product.id ASC LIMIT 5 OFFSET 10

这实际上解决了我关于性能的第一个问题。 :)

所以我的Relay.QL 查询已经转译成这个

query ListPage_ViewerRelayQL($id_0:ID!) {
  node(id:$id_0) {
    ...F1
  }
}
fragment F0 on Product {
  id,
  title,
  price
}
fragment F1 on Viewer {
  _products4tSFq4:products(after:"YXJyYXljb25uZWN0aW9uJDUkNA==",first:5) {
    edges {
      cursor,
      node {
        id,
        ...F0
      }
    },
    pageInfo {
      hasNextPage,
      hasPreviousPage
    }
  },
  id
}

当我在我的 GraphQL 后端运行这个查询时，它返回了空结果

{
  "data": {
    "node": null
  }
}

然后我立即意识到问题出在哪里以及为什么我的 Relay 崩溃了。

问题在于重新获取查看器。我没有正确实现nodeDefinitions，当查看器ID点击idFetcher和typeResolver时，它失败并返回null。之后在客户端，Relay 无法完成我连接的重新获取并崩溃了！

经过小修和后端修复，我的无限滚动就像一个魅力！ :)