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：意外的批号（当前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。在客户端之后，Relay无法完成重新连接并崩溃！

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

RelayJS无限滚动

1 个答案: