RelayJS无限涡旋

Question

我试图在我的Relay前端做一个无限的滚动分页，但是没有成功。

此时此刻，我有这个反应元件..。

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条记录，但是最近我一直在滚动一个will查询N+5记录。最后，我将查询整个表(数千条记录)的数据库！这是不可接受的。

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

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

resolveImmediate.js?39d8:27不变性冲突: performUpdateIfNecessary:意外批号(当前19次，待定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
  }
}

然后，我立即意识到问题在哪里，以及为什么我的继电器崩溃。

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

在对后端的进行了小的修复和修复之后，我的无限滚动就像一种魅力！)