Relay is just getting better : )
In a recent commit to Relay 1.2, it was added a third argument to refetchConnection, the refetchConnection is an API provided by the createPaginationContainer.
The trouble many where having was the need to paginate and refetch new data, for so it was necessary to compose a Refetch container with a Paginate container as a child, as you can imagine this was not easy to get done and didn't work well.
Using the Refetch container to do it all is also an option, but this also means that you will have to use graphql.experimental and as the name indicates this is something that is still experimental and might change.
How can we set up a pagination container with also some refetch, well here is the fun part.
First let's create this Pagination container in a component which renders a list of links.
Now in the Pagination Container there are 3 variables, count, after and filter. Count and After are part of the pagination logic, we are interested in refetching the filter variable.
Before we proceed on to how to refetch, first we need to set these variables in the parent Query Renderer. For that let's declare it on the Query Renderer.
We have to declare the variables in two places, inside the query as its arguments and also inside the component QueryRenderer as a prop. Now we have access to these variables in our child queries.
Since the Pagination Container exposes loadMore API to this.props.relay, all you have to do to paginate or load more is call this API with the page number as you can see below.
But this we all know.
What about refetching ?
for refetching is equally simple.
the refetchConnection API takes three arguments.
```
refetchConnection:(
totalCount: number,
callback: (error: ?Error) => void,
refetchVariables: ?Variables,
) => ?Disposable,```
And that is it!.
To understand I created a HackerNews Link list simple app, using graphcool's backend api. if you want to check it out, feel free to clone the repo.
It also has subscriptions for the votes.
Enjoy!
