I’m using react-instantsearch-hooks in a project with a multi-index search. The setup looks somewhat likes this.
<InstantSearch>
<MyCustomSearchBox />
<Index indexName={myIndexName} indexId="index1">
...
</Index>
<Index indexName={myIndexName} indexId="index2">
...
</Index>
</InstantSearch>
Each index includes some components with useRefinements and <Pagination />. I’ve looked carefully and nothing is conditionally rendered, they should all be there from the very first render.
The page renders correctly and I’m able to search results. However, when I go to add the pagination information to the URL via the routing option, I get the following warning and it doesn’t work. Similar if I try to add the refinements to the URL.
[InstantSearch.js]: The UI state for the index “index1” is not consistent with the widgets mounted.
This can happen when the UI state is specified via initialUiState, routing or setUiState but that the widgets responsible for this state were not added. This results in those query parameters not being sent to the API.
To fully reflect the state, some widgets need to be added to the index “index1”:
page needs one of these widgets: “pagination”, “infiniteHits”
If you do not wish to display widgets but still want to support their search parameters, you can mount “virtual widgets” that don’t render anything:
const virtualPagination = connectPagination(() => null);
search.addWidgets([
virtualPagination({ /* … */ })
]);
If you’re using custom widgets that do set these query parameters, we recommend using connectors instead.
Any ideas on why it isn’t working correctly?
If I set routing={true} then reload the search page (without any search parameters), it reloads and successfully adds all the search parameters to the URL and there is no warning in the console. However, if I then refresh the page with those search parameters in the URL, I get the o-so-familiar-by-now console warning about not being consistent with the widgets mounted. ¯_(ツ)_/¯