Stats component does not show the total number of results in a multiple indexes search

[ghost]

Hi!

I'm using React InstantSearch to search multiple indexes in Algolia.

I need to display the total number of results on top of my search page and I've understood that the Stats component is the way to go.

Unfortunately it only shows the results for the default index set in indexName on InstantSearchNext (indexA). Whenever I get a result from any of the other indexes (indexB or indexC) defined by the Index component, I get 0 results.

Is this as intended? Is there a workaround to show the total amount?

Many thanks!

This is what I have:

<InstantSearchNext
	searchClient={searchClient}
	indexName="indexA"
	routing
>
        <SearchBox/>
	<Stats /> 
		<div>
			<Index indexName={indexA}>
				<Hits />
			</Index>

			<Index indexName={indexB}>
				<Hits />
			</Index>

			<Index indexName={indexC} >
				<Configure filters="_type:article" />
				<Hits />
			</Index>

			<Index indexName={indexC}>
				<Configure filters="NOT _type:article" />
				<Hits />
			</Index>
		</div>
</InstantSearchNext>

[Haroenv]

stats is only designed for a single index. A solution is using useInstantSearch:

function TotalStats() {
  const { scopedResults, results } = useInstantSearch();

  const totalNbHits = scopedResults.reduce((total, current) => total + current.results.nbHits, 0)

  return <p>found {totalNbHits} in {results.processingTimeMS}ms</p>
}

[ghost]

I understand, worked to import the type like you suggested, thanks!

Just curious, what would the Map-version look like?

[Haroenv]

Thinking about it again, I'm not sure if it's actually more efficient if push comes to shove, but I had this in mind:

const deduped = [...new Map(scopedResults.map(res => [res.indexName, res]).values()]

[ghost]

I see. I don't know if that does what I'm after tho... For some reason the scopedResult sometimes returns an array with duplicate of indexes. So what I want is to remove those duplicates so that I dont get the wrong number back. What I'm doing now instead is:

			const map = new Map<string, boolean>()

			return arr.reduce((acc, item) => {
				if (!map.has(item.indexId)) {
					map.set(item.indexId, true)
					acc.push(item)
				}
				return acc
			}, [])
		}

[Haroenv]

doesn't my code already do that too, as [...new Map([[1, 1], [1,2]]).values()] returns [2]? In any case if your code works how you want it, go ahead :) I just think you're checking for duplicates twice

[ghost]

Maybe it does! I just looked at it briefly, my bad :) Thanks for all the help and feedback!