Question

我试图用react-infinite-scroll-component进行无限滚动。我的问题是如何使用Apollo客户端获取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();
}

此外，您需要插入数组而不设置它。首先，请确保您从data获得哪种Query 然后concat到您的数组。

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

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

1 个答案: