Access multi-index state using react-instantsearch-hooks?

Hi! I’m loving react-instantsearch-hooks. I just have one question: how can I access the state of all of my indices concurrently?

My setup essentially looks like this:

const App = () => (
     <InstantSearch
	      searchClient={searchClient}
	      indexName={'a'}
	      suppressExperimentalWarning
        >
	    <SearchBox />
	    <Index indexName='a'>
          <CustomResults />
        </Index>
        <Index indexName='b'>
          <CustomResults />
        </Index>
     </InstantSearch>
)

(sorry about the formatting, discourse is obliterating my leading whitespace)

SearchBox uses useSearchBox from “react-instantsearch-hooks” and CustomResults uses useHits from the same package. This all works swimmingly.

What I’d like to do now is to figure out how to access all of the results inside the InstantSearch component. Is there an example of how to access that global state? I’ve seen connectStateResults examples, but connectStateResults is part of react-instantsearch-dom and I didn’t see it in the hooks.

Any pointers others can offer would be hugely helpful!

1 Like

I have a hunch useConnector would be useful here but I’m not yet sure how to use it…

I got rid of the hooks and all dependencies except algoliasearch, which actually executes the search. In my parent component I used this two liner to query multiple indices and store the global state.

useConnector(connectAutocomplete) would give you access to those items, or a custom connector will receive access to scopedResults that can be used for such a display.

Once we have our complete documentation for React InstantSearch hooks, don’t hesitate to try it out again and give feedback!

2 Likes

Thanks for the follow up!