Relay is just getting better : )

Andrei Calazans
Aug 25, 2017 · 2 min read
The Graph

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.


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.



The Bleeding Edge Tech Team

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store