Different hitsPerPage for initial load vs user search

I’m using Algolia with Gatsby/React InstantSearch (latest versions of both). I don’t want to restrict the number of results that a user can return, nor do I need pagination; I just want the results page to be as long as possible. I’ve achieved that by using the Configure widget with a “maxed out” hitsPerPage value of 1000:

<Configure hitsPerPage={1000} />

However, that means that the initial state for the InstantSearch component is to return every result (my index is < 1000 right now), which causes long load times that are unecessary. Ideally, I want the initial hitsPerPage to be 9 but then for any actual user query to ignore that and return up to 1000. Is there a way to achieve this?

Alternatively, is there a way to modify the initial search in a way that would have the same effect?

We do not recommend loading 1000 results at each Algolia query for the same reasons than you don’t want to load them on page load: it’s heavy and slow. We would recommend you following this tutorial on infinite scrolling hits instead: https://www.algolia.com/doc/guides/building-search-ui/resources/ui-and-ux-patterns/in-depth/infinite-scroll/react/ .

1 Like

Hi Jerska, thanks for the link, but I’m afraid I don’t want infinite scroll on the first load either. I’m specifically looking for a way to restrict a “blank” query state to just the first 10 or so hits. If there’s a way to do that using infinite scroll (i.e. when the query is empty don’t allow scroll to load any more, if it isn’t then scroll infinitely) then I’d be happy to use that but the tutorial makes no such mention.

To be clear, apart from the initial load there wouldn’t ever be a time when a very large number of results would be returned. I have only set it to 1,000 so that I don’t have to keep increasing it with usage, though I might change that. However, I have search setup to allow filtering by category, and when a user does so I do want all results within that category to display. If any one category ever became larger than 100 results I would definitely look at implementing infinite scroll, but for now it’s fine as it is.

Modifying settings live depending on the current state is something that usually requires using the library’s internals.
All our instantsearch libraries use our JavaScript helper internally to manage its state.

With instantsearch.js, I know you could use searchFunction for dynamically computed search parameters.

However, I’m not qualified enough with react-instantsearch to know what you could use to achieve the same results.
You might be able to use onSearchStateChange: https://www.algolia.com/doc/api-reference/widgets/instantsearch/react/#widget-param-onsearchstatechange and a custom provided searchState.

1 Like

Thanks again, I’ll take a look into onSearchStateChange and see what I can do.

Hi @theadhocracy,
In addition to what @Jerska said,
if you passes an object to searchState, it switches to the controlled mode.

In another word,

const [searchState, setSearchState] = useState({...});

you pass searchState to InstantSearch component and when onSearchStateChange is triggered, you store it back to your searchState.
And at any time you want, you can add/remove hitsPerPage property to searchState.

Then that’s the controlled behavior by your own searchState.

Let me know how it goes!

1 Like

Thanks @Jerska and @eunjae.lee, ended up using a combination of the two suggestions (including infinite scroll) to get what I wanted.

I’m using onSearchStateChange within the <InstantSearch> component to set a pageLimit state field based on the current values of searchState.query and searchState.refinementList. Basically, it checks the searchState to see if the query is blank and there are no filters in use, then sets the pageLimit state to either 9 or 27, which determines the total number of hits that are initially rendered/requested.

That is then passed to the <Configure> widget directly like so:
<Configure hitsPerPage={pageLimit}/>

Works like a charm to dynamically define the initial hit limit and massively speed up initial render, but I was still getting noticeable lag for some queries, so I took your advice and added infinite scroll. The combination gives me close to an ideal setup and no lag :+1:

1 Like

Thank you for keeping us updated, glad you got everything working!