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

【问题标题】：Make an infinite scroll with react and ruby-graphql使用 react 和 ruby-graphql 进行无限滚动
【发布时间】：2019-07-17 14:48:56
【问题描述】：

我试图用react-infinite-scroll-component 无限滚动。我遇到的问题是如何使用 Apollo 客户端为 ruby-graphQl 获取数据

这是我尝试过的。但它甚至没有达到 de Query 甚至知道逻辑是否有效。我怎样才能让它发挥作用？

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;

【问题讨论】：

标签： reactjs graphql react-apollo

【解决方案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
});

【讨论】：