Easy Infinite Scrolling With Apollo Hooks in React Native

Yassir Hartani
Sep 15 · 3 min read
Image for post
Image for post

Infinite scrolling is a feature that you can see in a lot of modern apps(Facebook, Tweeter, Reddit, etc…), every time the list data in your app gets bigger you will need to add this feature to optimize your list performance.

So In this article, we’ll implement the infinite scrolling using apollo hooks

Note: I expect that you already have a react-native project initialized with apollo client, also I’ll be using the GitHub Graphql API as an endpoint to display a list of repositories, please also make sure to create a personal access token here and attach it in the apollo header😁.

So Let’s get started.

First, let’s build our basic list component.

For now, we’ll add just the basics in our list component: the repositories query, a flatlist, and a useQuery from apollo hooks to fetch the data.

- Here we added a query to fetch the Facebook repositories with a first variable that will allow us to specify the number of the items being fetched.

- the pageInfo in query contains two values(endcursor and hasNextPage) which we’ll use when fetching a new set of repo’s.

Add The Infinite scroll

To add the infinite scroll functionality we’ll use the fetchMore function from the useQuery result,

This will allow us to make a new query with and merge the new result into the original result. You can read more about this function here.

Now let’s add the function that will handle the fetchMore

Before we fetch more data I checked if there is more data available with `hasNextPage` which is a good thing to prevent unnecessary network requests (optional), then we passed the after and first variables, the after here refer to the endCursor(the last item fetched) this method is called cursor-based pagination you can read more about it here.

Now when the update will complete the onUpdate function will be fired, this function will be responsible for merging the previous data with the new one.

Note that we inserted the new repo’s at the end of the list and we updated the pageInfo so we have its new values.

Pull Refresh

In a lot of cases, we’ll need to implement the pull refresh along with the infinite scrolling, for that we’ll use the refetch function from the useQuery result.

Here we also added the networkstatus property to identify the status of our query, and we set the notifyOnNetworkStatusChange option to true in order to trigger a rerender in our component when the refetch is called.

The refreshing constant will be set to true when the refetch function will be triggered, and notice how we prevented the first loading from rendering when refreshing is set to true.

Thanks for reading 📚

→ You can find the source code in this repo.

I hope you enjoyed reading this article, I would love to hear your thoughts and feedback in the comments below.

Github | Twitter ✈️

The Startup

Medium's largest active publication, followed by +734K people. Follow to join our community.

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