Accessing exhaustiveNbHits in React?

We have run into the issue where our data set is large and Algolia no longer provides accurate hit counts. The problem is described in the documentation here:

One proposed solution is this:

The response when performing a search contains the exhaustiveNbHits and exhaustiveFacetsCount attributes. You can use them to manage non-exhaustivity on the front end, indicating to the user that the values are approximations.

This sounds like a great solution. However, connectStats does not provide access exhaustiveNbHits. It isn’t clear what does. Where is this value provided? We are using React.

Thanks!

Hi @kevin2,

You don’t have access to exhaustiveNbHits indeed in the Stats component of React but you can simply use the prop nbHits provided by the integration.
See that codesandbox example to give you an idea of what’s possible https://codesandbox.io/s/headless-grass-nn2n4?file=/src/App.js

Please let me know if this solves your issue and have a good day!

Hey @chloe.liban,

Thanks for the response. The problem I was referring to was that under certain circumstances, the nbHits value returned by Algolia is no longer accurate:

When hit and facet counts reach such a large amount that this becomes a problem, users aren’t looking for exact numbers, but for a general idea (e.g., 1,000 rather than 1,042).

I am in a situation where I can load my search page and it will display 184,125 results, and refresh it and it will say 143,631 results, and so on. There is no consistency. I am happy to show the nbHits value when it is exhaustive, but when it isn’t exhaustive I would prefer instead to display the fact that the number is approximate to the user.

My understanding of the article linked above was that the exhaustiveNbHits value returns false when Algolia is approximating results, and that I would be able to use that value to let the user know that the numbers are approximate.

If there is another or a better way, I would be happy to use that as well.

Hi @kevin2,

Indeed, using exhaustiveNbHits is the best way to go about adapting the UI when nbHits becomes an approximation. While you don’t have access to that attribute with the connectStats, you can use connectStateResults instead which contains more information.

See this codesandbox for an example:

If you’re adventurous and you want more granular control, you could even create your own connector and expose only the attributes that you need. See documentation:

I hope this helps!

Thank you! I didn’t know about the connectStateResults connector. I should be able to figure it out from here.

Also, for the record, the Sandbox you sent has an error. :slight_smile:

Fixed sandbox: https://codesandbox.io/s/smoosh-sunset-63yt6

1 Like

Hi,
I’m facing the same problem as Kevin’s, using Instantsearch.js. It seems creating custom widgets using connectStateResults connector is the solution, but I cant find connectStateResults in the Js library. Is there any connector similar to connectStateResults in Instantsearch.js? Thanks in advance

@daduc, it seems that this is an open gap between the InstantSearch.js and React InstantSearch libraries. (see this github issue)
Depending on your use case, you can maybe hack something using the connectHits as the full result object is accessible in the renderOptions, and this could maybe be leveraged, but it’s going to be hackish.

I hope this still gives you a direction to move forward!
Best,