Search⌘ K
Home
Courses
The Road to React: The One with Class Components

Paginated Fetch

Explore how to fetch paginated data from the Hacker News API in a React class component. Understand how to manage component state to merge newly fetched results with existing data, utilize lifecycle methods, and implement onClick handlers to load more content dynamically.

We'll cover the following...

Take a closer look at the data structure and observe how the Hacker News API returns more than a list of hits. Precisely, it returns a paginated list. The page property, which is 0 in the first response, can be used to fetch more paginated sublists as results. You only need to pass the next page with the same search term to the API.

We’ll start with:

Javascript (babel-node)
const DEFAULT_QUERY = 'redux';
const PATH_BASE = 'https://hn.algolia.com/api/v1';
const PATH_SEARCH = '/search';
const PARAM_SEARCH = 'query=';
const PARAM_PAGE = 'page=';

Now you can use the new constant to add the page parameter to your API request:

Node.js
const DEFAULT_QUERY = 'redux';
const PATH_BASE = 'https://hn.algolia.com/api/v1';
const PATH_SEARCH = '/search';
const PARAM_SEARCH = 'query=';
const PARAM_PAGE = 'page=';
const url = `${PATH_BASE}${PATH_SEARCH}?${PARAM_SEARCH}${DEFAULT_QUERY}&${PARAM_PAGE}`;
console.log(url);
// output: https://hn.algolia.com/api/v1/search?query=redux&page=

The fetchSearchTopStories() method will take the page as second argument. If you don’t provide the second argument, it will fallback to the 0 page for the initial request. Thus the componentDidMount() and onSearchSubmit() methods fetch the first page on the first request. Every ...