> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Multi-index search

> Searching multiple indices in your React InstantSearch app.

export const SearchQuery = () => <Tooltip tip="The text users enter into a search box. In the Search API, this corresponds to the query parameter. A search query is often used with filters, facets, and other parameters, but these aren't part of the query text itself.">
    search query
  </Tooltip>;

export const Index = () => <Tooltip tip="An Algolia index is a searchable dataset that consists of records and configuration settings. These settings define how the records are searched and ranked.">
    index
  </Tooltip>;

export const Facet = () => <Tooltip tip="An attribute in your records that lets users filter or group results (for example, by color, brand, or price)." cta="Faceting" href="/doc/guides/managing-results/refine-results/faceting">
    facet
  </Tooltip>;

export const Application = () => <Tooltip tip="An Algolia application is a self-contained environment with its own indices, configuration, and API keys. Applications don't share data or settings with each other.">
    application
  </Tooltip>;

<Note>
  This is the **React InstantSearch v7** documentation.
  If you're upgrading from v6, see the [upgrade guide](/doc/guides/building-search-ui/upgrade-guides/react/#migrate-from-react-instantsearch-v6-to-react-instantsearch-v7).
  If you were using React InstantSearch Hooks,
  this v7 documentation applies—just check for [necessary changes](/doc/guides/building-search-ui/upgrade-guides/react/#migrate-from-react-instantsearch-hooks-to-react-instantsearch-v7).
  To continue using v6, you can find the [archived documentation](https://algolia.com/old-docs/deprecated/instantsearch/react/v6/api-reference/instantsearch/).
</Note>

Multi-index search (federated search) is a method for searching multiple data sources simultaneously.
This means that when users enter a search term, Algolia will look for and display results from all these data sources.

This doesn't necessarily mean that the results from Algolia indices are combined since their contents could be quite different.
[Your approach](https://www.algolia.com/blog/product/federated-search-types/) may be to display the results from each <Index /> separately.
You could display the top-rated items from a movie index alongside the list of results from a book index.
Or you could display category matches alongside the list of results from a product index

## Search multiple indices with InstantSearch

<Columns>
  <Card title="Open CodeSandbox" icon="codesandbox" href="https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/react-instantsearch/multi-index-hits">
    Run and edit the Multi-index search example in CodeSandbox.
  </Card>

  <Card title="Explore source code" icon="github" href="https://github.com/algolia/doc-code-samples/tree/master/react-instantsearch/multi-index-hits">
    Browse the source for the Multi-index search example on GitHub.
  </Card>
</Columns>

You can search several Algolia indices at once in your React InstantSearch app using multiple [`Index`](/doc/api-reference/widgets/index-widget/react) widgets.
All indices must be on the same Algolia <Application />.

```jsx React icon=code theme={"system"}
import { liteClient as algoliasearch } from "algoliasearch/lite";
import { Hits, Index, InstantSearch, SearchBox } from "react-instantsearch";

const appID = "ALGOLIA_APPLICATION_ID";
const apiKey = "ALGOLIA_SEARCH_API_KEY";

const searchClient = algoliasearch(appID, apiKey);

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](/doc/api-reference/widgets/react) in an [`Index`](/doc/api-reference/widgets/index-widget/react).
**Nested widgets only affect this particular index, while direct children of the root [`InstantSearch`](/doc/api-reference/widgets/instantsearch/react) widget affect everything.**

In the following example, when typing in [`SearchBox`](/doc/api-reference/widgets/search-box/react),
the <SearchQuery /> applies to both indices.
Conversely, each [`Index`](/doc/api-reference/widgets/index-widget/react) contains a [`Configure`](/doc/api-reference/widgets/configure/react) widget that only affects its set of results.
Both [`Hits`](/doc/api-reference/widgets/hits/react) display results for the index they're targeting,
using the same query but with a different number of hits per page.

```jsx React icon=code theme={"system"}
// ...

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>
  );
}
```

### Search the same index with different search parameters

**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`](/doc/api-reference/widgets/index-widget/react#param-index-id) on each [`Index`](/doc/api-reference/widgets/index-widget/react).

```jsx React icon=code theme={"system"}
// ...

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>
  );
}
```

## Search multiple indices with Autocomplete

You can use the [Autocomplete library](/doc/ui-libraries/autocomplete/introduction/what-is-autocomplete) in your InstantSearch app to build a dynamic multi-source search experience.
For example, you may want to display Query Suggestions together with recent searches, create a multi-column layout that mixes <Facet /> and item previews, or even dynamically change sources based on the query.

<Info>
  Autocomplete isn't limited to Algolia indices: you can use static sources or fetch data from other APIs.
</Info>

For more information, see [Include multiple result types](/doc/ui-libraries/autocomplete/guides/including-multiple-result-types).

For more information, see:

* [Include multiple result types](/doc/ui-libraries/autocomplete/guides/including-multiple-result-types)
* [Reshape sources](/doc/ui-libraries/autocomplete/guides/reshaping-sources)
* [Create a multi-column layout](/doc/ui-libraries/autocomplete/guides/creating-a-multi-column-layout)

- [Integrate Autocomplete with React InstantSearch](/doc/ui-libraries/autocomplete/integrations/with-react-instantsearch)

## Category display

Algolia can help you display both category matches and results if you:

* **Add categories to your Query Suggestions** either inline or [listed below a result](/doc/ui-libraries/autocomplete/introduction/sandboxes#search-suggestions-with-categories). For example, you might see the following in your Query Suggestions list "game of thrones in Books"
* **Use multi-index search to display categories from a separate category index.** This is useful if you want to display categories and Query Suggestions at the same time. Clicking such a result typically [redirects](/doc/guides/building-search-ui/ui-and-ux-patterns/redirects/react) to a category page. The following is a sample dataset for a product index and a category index.

### Example product index

```json JSON icon=braces theme={"system"}
[
  {
    "name": "Fashion Krisp",
    "description": "A pair of red shoes with a comfortable fit.",
    "image": "/fashion-krisp.jpg",
    "price": 18.98,
    "likes": 284,
    "category": "Fashion > Women > Shoes > Court shoes"
  },
  {
    "name": "Jiver",
    "description": "A blue shirt made of cotton.",
    "image": "/jiver.jpg",
    "price": 17.7,
    "likes": 338,
    "category": "Fashion > Men > Shirts > Dress shirt"
  }
]
```

### Example category index

```json JSON icon=braces theme={"system"}
[
  {
    "name": "Court shoes",
    "category": "Fashion > Women > Shoes > Court shoes",
    "description": "A dress shoe with a low-cut front and a closed heel.",
    "url": "/women/shoes/court/"
  },
  {
    "name": "Dress shirt",
    "category": "Fashion > Men > Shirts > Dress shirt",
    "description": "A long-sleeved, button-up formal shirt that is typically worn with a suit or tie.",
    "url": "/men/shirts/dress/"
  }
]
```

## Next steps

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

* [Implementing routing](/doc/guides/building-search-ui/going-further/routing-urls/react) to sync your UI with the browser URL.
* Checking the [API reference](/doc/api-reference/widgets/react) to discover more Hooks.