Multi-Index Search with React InstantSearch Hooks

Multi-index search, or federated search, lets you search multiple data sources at once with the same query and gather results in a single search experience. This is a common pattern when building autocomplete search experiences, but also to offer centralized access to multiple sources of content developed and curated independently.

Multi-index search can also help you achieve complex UIs that display the content of the same index in several ways, for example to surface top-rated items before the list of results.

This guide covers how to create multi-index search experiences:

• Searching multiple indices with InstantSearch
• Searching the same index with different search parameters
• Building a multi-source autocomplete experience

Search multiple indices with InstantSearch

You can search several Algolia indices at once in your React InstantSearch Hooks app using multiple <Index> widgets. All indices must be on the same Algolia application.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import algoliasearch from 'algoliasearch/lite';
import {
  Hits,
  Index,
  InstantSearch,
  SearchBox,
} from 'react-instantsearch-hooks-web';

const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');

function App() {
  return (
    <InstantSearch indexName="instant_search" searchClient={searchClient}>
      <SearchBox />

      <Index indexName="instant_search">
        <Hits />
      </Index>

      <Index indexName="instant_search_demo_query_suggestions">
        <Hits />
      </Index>
    </InstantSearch>
  );
}

Root-level and nested widgets

You can add any available widget in an <Index>. Nested widgets only affect this particular index, while direct children of the root <InstantSearch> widget impact everything.

In the following example, when typing in <SearchBox>, the query applies to both indices. Conversely, each <Index> contains a <Configure> widget that only affects its set of results. Both <Hits> display results for the index they’re targeting, using the same query, but with a different number of hits per page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// ...

function App() {
  return (
    <InstantSearch indexName="instant_search" searchClient={searchClient}>
      <SearchBox />

      <Index indexName="instant_search">
        <Configure hitsPerPage={8} />
        <Hits />
      </Index>

      <Index indexName="instant_search_demo_query_suggestions">
        <Configure hitsPerPage={16} />
        <Hits />
      </Index>
    </InstantSearch>
  );
}

Searching the same index with different search parameters

Doing multi-index search doesn’t always mean searching in different indices. Sometimes, you may want to search in the same index, but with different search parameters. This can be useful, for example, when storing different types of content in a single Algolia index, or when you want to surface specific items based on an attribute.

In this situation, make sure to include an indexId on each <Index>.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// ...

function App() {
  return (
    <InstantSearch indexName="instant_search" searchClient={searchClient}>
      <SearchBox />

      <Index indexName="instant_search" indexId="top_rated">
        <h2>Top-rated</h2>
        <Configure filters="rating = 5" />
        <Hits />
      </Index>

      <Index indexName="instant_search" indexId="all_products">
        <h2>All products</h2>
        <Hits />
      </Index>
    </InstantSearch>
  );
}

Build a multi-source autocomplete experience

One of the most common use cases of multi-index search is when you’re building an autocomplete experience. For example, you may want to display Query Suggestions together with recent searches, create a multi-column layout mixing facets and item previews, or even dynamically change sources based on the query.

You can use the Autocomplete library in your InstantSearch app to build a dynamic multi-source autocomplete experience. Autocomplete isn’t limited to Algolia indices, so you can even use static sources or fetch data from other APIs.

Next steps

You now have a good starting point to create an even richer experience with React InstantSearch Hooks. Next up, you could improve this app by:

• Implementing routing to synchronize your UI with the browser URL.
• Checking the API reference to discover more Hooks.