Getting Started with React and GraphQL to Build Infinite Scroll

In my current project, I have been asked to build an infinite scroll feature in React Application. I thought it would be a comparatively easy task. But later it seems tough. Moreover, the services are built with GraphQL. So I started doing R&D on these topics. In this short post, by creating a Simple News List Application, I am going to demonstrate what I have learned.

Setting up React App

Nothing is much easier than starting a react app by create-react-app.

create-react-app provides a fresh React app. npm start makes the project live at a specific port in the localhost.

Fresh React Application Live

Add below dependencies in package.json and run npm install .

GraphQL API

Now time to jump into getting data from GraphQl service. I built the GraphQL service in Django (Python Web Framework). I will not show that part in details as our focus is only on fetching data and displaying in the form of infinite scroll. The sample News API in the GraphQL tool given below.

Sample News API Data

Fetching Data

Apollo-client provides a mechanism for fetching data from GraphQL endpoint. This makes our life easier. All we need to do is just creating a query string. Apollo Client will take care of the rest. Let’s create a client in index.js.

The client will fetch data. And the ApolloProvider wraps React app and places the client on the context. In config/site.js add a variable GRAPHQL_URL. Define your GraphQl endpoint here. In my case, site.js

In App.js, write the query string.

This query retrieves 5 news items every time of a particular country. Now render Query component in App.js.

Query component takes query string as query prop. We pass two arguments country and after in variables prop. Relay is another GraphQL client that provides Pagination feature. If we look at the NEWS_FETCH query, we will see endCursor, which indicates the last item. We pass that endCursor as after prop. This tells Client to fetch the next 5 data items after the endCursor.

After fetching news data from API, NewsList component takes this as entries prop.

Whenever the scroll reaches the bottom, the fetchMore merges the new query result with the existing data on the client. If there is no new data, it simply returns the previous data. Then the child component NewsCard takes a piece of single news and displays it in a card.

Newscard.js

Wow! we make our Simple News List Application within a very short time.

Github Link

Simple News List Application

I recommend everyone to follow these links to know more.

  1. https://www.apollographql.com/docs/
  2. https://reactjs.org/
  3. https://graphql.org/

If you liked this article, make sure to follow my Medium profile and check out some other articles of mine!

Don't forget to CLAPS !!

Software Engineer | Professional Scrum Master | Research Enthusiast

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