Facets and sort become empty when all results are loaded

I have an instantsearchjs UI that returns a list of results for an ecommerce site. It uses an infinite scroll based on the instantsearch tutorial, and that mostly works fine.

I’ve noticed that when all the results are loaded, the facets no longer display anything. This is inconsistent unfortunately, but is happening often enough that it is causing problems. Any idea on what to look into would be helpful, and I don’t know why the facets would depopulate at all. There are no console errors being thrown.

Hello @kallen,

Is it possible to see a live example of the bug you’re describing. Maybe you could use our codesandbox template to give us a minimal example?

Thanks

I’ll see about setting up an example, but you can also see it in action on the site: popsockets.com.

https://www.popsockets.com/pages/all-popsockets

To reproduce here:

  1. Open the collections facet
  2. Start scrolling down
  3. Once the infinite scroll runs out of results to return, the facet will empty. You might have to scroll up and down a bit, but now it’s pretty consistent.

I’ve done some additional digging and here’s what I’ve found that I think might be useful.

When the facets are working, the response from Algolia contains a facets attribute in the JSON, even if there are no results to return:

{"results":[{
    "hits":[],
    "nbHits":592,
    "page":15,
    "nbPages":10,
    "hitsPerPage":60,
    "processingTimeMS":1,
    "facets":{
        "colors":  {
            "blue":100,
            "black":52,
            "pink":52,
            "red":51,
            "white":51,
            "yellow":39,
            "green":35,
            "purple":24,
            "gray":23,
            "orange":17
        },
        "styles":...
}},
"exhaustiveFacetsCount":true,
"exhaustiveNbHits":true,
"query":"",
"params":"...",
"index":"primary_shopify_live_products"
}]
}

Eventually the response stops returning the facets:

{"results":[{
    "hits":[],
    "page":17,
    "nbHits":0,
    "nbPages":0,
    "hitsPerPage":60,
    "exhaustiveNbHits":true,
    "processingTimeMS":1,
    "message":"you can only fetch the 1000 hits for this query. You can extend the number of hits returned via the paginationLimitedTo index parameter or use the browse method. You can read our FAQ for more details about browsing: https://www.algolia.com/doc/faq/index-configuration/how-can-i-retrieve-all-the-records-in-my-index",
    "query":"",
    "params":"...",
    "index":"primary_shopify_live_products"}
]}

I don’t have more than 1000 records in my index though, so I’m not sure how that error message applies in this case.

Sorry for not being responsive here. I tried to reproduce the error using the link you provided. I couldn’t reproduce any error. Did you manage to fix it?

Yes! I was able to fix it.

I realized that the problem was that, once all the results were loaded, it was still attempting to make a call, but the index knew that it has sent all results, so it was returning a dataset with the empty hits. My frontend was replacing the results with the empty hits.

I rewrote the code to check if the number of pages it had requested was more than the number available, and if that was the case, to stop making requests.