resultsPerPage is not being sent in the query

I had to move the SearchProvider configuration to the server-side as we're using different engines based on the logged-in user's group. Given that I have to wrap practically the whole application in the SearchProvider (we have the search box in the header while the search page is rendered to look like an overlay) I added a wrapper around the provider: it returns just the children while the config is being fetched, then the children wrapped in the provider once we have the config:

import { SearchProvider } from "@elastic/react-search-ui";
export const SearchContext = (props) => {
    if (props.config) {
        return <SearchProvider config={props.config}>{props.children}</SearchProvider>
    return <>{props.children}</> 

For some reason, this has caused 2 queries to be made rather than one - the second one without the resultsPerPage value in the query, so the query has (e.g. when using pagination to page 3):





This strangely means that results aren't being fetched after the initial first 100, so I can paginate up to 10 pages, but then I get no results back - so even though my search shows I have e.g. 500 results, I get an empty page on page 11.

Any ideas about why this might be happening??

Are you passing the initialState to the config( in your case props.config )?

"initialState": {
"resultsPerPage": 10

Hi @anuragchoudhary01 I tried with and without that setting, no change, unfortunately. I have it by default.

Hey reka,

The conditional to load just children seems fine, I don't think that would cause any issues, but I don't know, I've never done anything like that before.

Are you sure that's what's causing two queries to be made instead of one? Search UI will often times make additional queries with "size: 0" to properly calculate facets, if you're using "disjunctive" facets.

And I have no idea why the paging is behaving that way, are you sure it's related?


If you don't want to wrap your entire page in a SearchProvider you can create the "driver" separately and pass it into 2 separate instance of SearchProvider. That let's you use SearchProvider on the locations on your pages where you need it.

search-ui/SearchProvider.js at master · elastic/search-ui · GitHub. It accepts a param called "driver".

You instantiate with the same configuration that you would use for the provider.

I'm not convinced but I reverted all my changes yesterday and served the config locally again, everything was working fine. It is very odd.

I even tried defining an onSearch in the config to make absolutely sure that resultsPerPage gets included to no avail.

It is entirely possible that I haven't found the root cause yet but it definitely felt like I was on the right track with this last night.

Oh, that sounds very useful, I'll definitely have a look later!!

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.