Сделайте бесконечный свиток с реакцией и ruby-graphql - PullRequest
Новая
       10

Сделайте бесконечный свиток с реакцией и ruby-graphql

0 голосов
/ 24 июня 2019

Я пытаюсь сделать бесконечный свиток с react-infinite-scroll-component.Проблема, которая у меня есть, заключается в том, как получить данные с помощью клиента Apollo для ruby-graphQl

Это то, что я пытался.Но де 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;

1 Ответ

0 голосов
/ 25 июня 2019

Переместить закомментированную строку: 

  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
});
...