How to fetch for new edge using polling method? - ecmascript-6

Question

I am trying to do an infinite scrolling, it works fine by just increasing the first value. However, I would like to fetch for new edges prepending to the beginning. How can I do that without force fetching?
This is my RelayContainer, where firstLoad and afterFirst referring to the same connection with different arguments, using alias. Relay doesn't query for the anything before. I have also forcefully set hasNextPage and hasPreviousPage to true from graphql server side
How does relay decides whether to fetch new edge from server
constructor(props) {
super(props);
if (!props.viewer) {
this.handleLogout();
console.log('Access expired.');
return;
}
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => {
return r1.cursor !== r2.cursor;
}});
this.state = {
dataSource: ds.cloneWithRows(props.viewer.firstLoad.edges),
};
}
componentWillMount() {
// Set up to query for newly received messages
const {edges} = this.props.viewer.firstLoad;
this.props.relay.setVariables({
last: edges.length,
before: edges[edges.length - 1].cursor,
});
}
componentDidMount() {
this._interval = setInterval(() => {
this.props.relay.setVariables({
last: this.props.relay.variables.last + 10,
});
}, 2000);
}
componentWillReceiveProps(nextProps) {
const {edges} = nextProps.viewer.afterFirst;
if (edges) {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(edges),
});
}
}

Answer 1

I have successfully solved my requirement by creating a new field that returns new items after a cursor/timestamp, and manually maintaining an array of data that's used for displaying, populated by data from Relay.
One key takeaway is to concat the variables with some random data so that setVariables will make a request to the server instead of the cache.
startPolling() {
this._timer = setTimeout(() => {
this.props.relay.setVariables({
lastCreatedAt: `${this._lastCreatedAt}:${new Date().getTime()}`,
});
this.startPolling();
}, 5000);
}