How to update variables using createRefetchContainer?

Question

Since the React Relay createPaginationContainer does not support offset-based pagination, the next best option would be to handle this feature through the use of the createRefetchContainer.

In the example provided on the Relay Modern documentation https://facebook.github.io/relay/docs/refetch-container.html, when implemented will paginate forward one time, but only because we are transitioning from our default state at offset of 0 to our new state of 0 + 10. Subsequent click events produce the same result since the values are not being stored.

I would have expected that the offset value would continue to increment but it does not appear that the state is being maintained through each refetch.

I came across this issue on the repo which seems to have addressed this, https://github.com/facebook/relay/issues/1695. If this is the case then the documentation has not been updated.

score 1 · Answer 1 · answered Aug 05 '17 at 20:06

While I believe there should be a built in mechanism for this, I ultimately ended up storing values in state and using callbacks to trigger my refetch.

So in the example above which I listed from the documentation the update appears to happen here:

_loadMore() {
  // Increments the number of stories being rendered by 10.
  const refetchVariables = fragmentVariables => ({
    count: fragmentVariables.count + 10,
  });
  this.props.relay.refetch(refetchVariables, null);
}

So the issue I have with this particular example is that we are pulling the default state from the fragmentVariable so in essence no real change is ever occurring. This may be acceptable depending on your implementation but I feel that for most use cases we would like to see values being actually updated as variables in the updated fragment.

So the way I approached this in terms of my offset-based pagination was...

_nextPage = () => {
  if ((this.state.offset + this.state.limit) < (this.state.total - this.state.limit) {
    this.setState({ offset: (this.state.offset + this.state.limit), () => {
      this._loadMore();
    }
  }
}

_loadMore = () => {
  const refetchVariables = {
    offset: this.state.offset,
    limit: this.state.limit
  }
  this.props.relay.refetch(refetchVariables, null);
}

May have a typo, I'm not actually looking at my code right now. But by using the state of the component, you will effectively be able to update the variables of the refetchContainer.

How to update variables using createRefetchContainer?

1 Answers1