使用react和ruby-graphql进行无限滚动

Question

我试着用react-infinite-scroll-component做无限的滚动。我遇到的问题是如何使用Apollo client for ruby-graphQl获取数据

这就是我尝试过的。但它甚至无法知道逻辑是否有效。我怎么才能让它工作呢？

class Users extends React.Component {
  state = {
    items: { users: [] },
    cursor: 0
  };

  fetchMoreData = () => {
    console.log("until here works");

    return (
      <Query
        query={get_users}
        variables={{ limit: 9, skip: cursor }}
        fetchPolicy="cache-and-network"
      >
        {({ data }) => {
          console.log("never reached this point");

          return this.setState({
            items: data,
            cursor: cursor + 9
          });
        }}
      </Query>
    );
  };

  render() {
    this.fetchMoreData();
    const { items } = this.state;

    return (
       <InfiniteScroll
        dataLength={items.users.length}
        next={this.fetchMoreData}
        hasMore
        loader={<h4>Loading...</h4>}
      >
         <UsersList items={items} />
      </InfiniteScroll>
    );
  }
}

export default Users;

Answer 1

移动注释行：

  render() {
    this.fetchMoreData(); // move this line from here to `componentWillMount`
    const { items } = this.state;

componentWillMount将获取数据并

componentWillMount(){
   this.fetchMoreData();
}

另外，你需要推入数组而不是设置它。首先，确保从Query获得哪种类型的data，然后再从concat获取到您的阵列。

return this.setState({
      items: this.state.items.concat( data ) //make sure yr data is properly concatenate!
      cursor: cursor + 9
});