Pagination

[alex-mcleod]

Hello, thanks for providing this. How would I go about paginating data correctly?

[r0b1n]

Hi @alex-mcleod
With Relay we can use this approach for pagination https://facebook.github.io/relay/graphql/connections.htm

Please see example by Facebook.

// NewsFeed.react.js
class NewsFeed extends React.Component {
  render() { ... }

  loadMore() {
    // read current params
    var count = this.props.relay.variables.count;
    // update params
    this.props.relay.setVariables({
      count: count + 5,
    });
  }
}

Also I think it is possible to pass variables to Actions. Not sure but you may need to set page variable in initialVariables to null and add some logic in prepareVariables.

// on page one (for example with articles):
<Button onPress={() => Actions.Comments({id: 123, page: 1})}> // page: 1 not needed if there is additional logic in prepareVariables which manage default value.
  See comments
</Button>
// on page two, with comments
Actions.Commend
<Button onPress={() => Actions.refresh({page: 2})}>
  Go to page 2
</Button>

P.S. Backend from this example doesn't support pagination. So make sure your backend does.

[alex-mcleod]

@r0b1n excellent, thanks for the example. It turned out I need to add a 'viewer' field to my root level query, due to this issue ---> facebook/relay#112. After doing that, I was able to paginate using variables in my react container, rather than using the refresh action to update page state. The problem with refreshing was it would remount the component each time.