Paginate results in React InstantSearch

This is the React InstantSearch v7 documentation. React InstantSearch v7 is the latest version of React InstantSearch and the stable version of React InstantSearch Hooks.

If you were using React InstantSearch v6, you can upgrade to v7.

If you were using React InstantSearch Hooks, you can still use the React InstantSearch v7 documentation, but you should check the upgrade guide for necessary changes.

If you want to keep using React InstantSearch v6, you can find the archived documentation.

Pagination gives you complete control over how you retrieve query results. You can:

• Implement standard paging
• Retrieve specific record subsets that ignore page boundaries.
• Set pagination defaults at indexing time
• Override pagination default settings at query time.

Pagination at indexing time

At indexing time, you can set up two defaults:

• hitsPerPage - the number of hits returned for every page
• paginationLimitedTo - controls the number of hits retrieved for a given query

Pagination at query time

You can:

• Retrieve a specific page with the page parameter
• Specify specific record subsets by using the offset and length parameters
• Override the default for hitsPerPage

Response details

Algolia includes information about pagination in the API response.

1
2
3
4
5
6
7
{
  "page": 0,
  "nbHits": 40,
  "nbPages": 2,
  "hitsPerPage": 20,
  "exhaustiveNbHits": true
}

• page returns the current page (this value starts at 0)
• hitsPerPage returns the maximum number of hits returned for each page
• nbPages returns the number of pages available for the current query
• nbHits returns the number of hits that the search query matched
• exhaustiveNbHits returns a boolean indicating if the nbHits count was exhaustive or approximate
• exhaustiveTypo returns a boolean indicating if the typo-tolerance search was exhaustive or approximate (only included when typo-tolerance is enabled)

No hits or is the search still in progress?

You should cater for situations when there are no hits (nbHits = 0) by displaying a message to users and clearing filters so they can start over.

Sometimes, though, no hits can be reported if the user’s device can’t access the network or the network connection is slow. To determine if there are no hits for a query or if the search is still in progress, examine the value of InstantSearch’s status property (JS), onLoadingChanged event (Android), or isLoading event (iOS). You should also consider adding a loading indicator to inform users on a slow connection that their search is still in progress.

Exhaustive hits

Usually, Algolia returns an accurate number of total hits. However, if a query returns many hits, Algolia approximates the count to avoid scanning the whole index. This approximation protects other search and indexing operations. If your API response includes the exhaustive.nbHits parameter, the number of hits is approximate.

Retrieving specific pages

At query time, you can pass in the page parameter to access a specific results page. The hitsPerPage parameter provides a way to set the default number of hits returned for each page. By default, its value is 20. However, this can be overridden as an index setting or as a query parameter.

1
2
3
4
5
6
index.search('query', {
  page: 2,
  hitsPerPage: 5
}).then(({ hits }) => {
  console.log(hits);
});

Pagination limitations

Default number of hits per query

By default, Algolia includes up to 1,000 hits per query.

Overriding the default limits

You can adjust the number of hits in a paginated query with the paginationLimitedTo parameter:

1
2
3
index.setSettings({
  paginationLimitedTo: 5000
});

The maximum value is 20,000 hits per query. Increasing the pagination limit might decrease performance. Only set this number as large as necessary.

Paging beyond the limit

If you send a request for a page that doesn’t exist or is out-of-range, that is, when page >= nbPages, Algolia doesn’t return an error. Instead, it returns 0 results.

Retrieving a subset of records (with offset and length)

In most cases, you only need page and hitsPerPage to add pagination. However, if you want to insert items, such as ads, into the results without affecting pagination, use the offset and length parameters. They allow you to specify the records to retrieve, not the page.

The offset parameter lets you specify the starting record, and length sets the number of records returned. For example, if you have 100 records in your result set, broken down into 10 pages (hitsPerPage=10), retrieve these subsets as follows (offset is zero-based):

• Records 50 to 80 (offset=49 and length = 30).
• Records 21 to 25 (offset=20 and length = 5).

With the InstantSearch UI libraries, you can only use page and hitsPerPage to implement pagination.