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.

```

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!

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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