Mutli index with one hits widget

[dianeba3]

My question is similar to this previous question: "Showing one set of hits with multiple indexes #4490" except now I know that mutli index querying exists in instantsearch.js. I'm just wondering if there is a way to use instantsearch with more than just a few indices (~100+) and display them under one hit instead of each index having its own hits widget.

[Haroenv]

What would the use case be of having that many hits displayed at the same time? does every index have only one hit displayed?

[dianeba3]

Querying from one index is not an option at the moment for me (perhaps in the future) so I'm trying to make it work for this.
Now I am trying to fetch the labels for the refinement list before but every time I pass in the labels as an array called items in the custom refinement list function renderFilterList it only ever reads it as the label from the primary index so not sure why that isn't working.

https://codesandbox.io/p/github/dianeba3/improved-octo-telegram/main?import=true

[Haroenv]

RefinementList is always based on a single index indeed, you'll need to use a connector and use getFacetValues from every one of the scopedResults similar to how you do for the hits. The layout should be something like this:

addWidgets([
  connectRefinementList(() => {})({ attribute: 'brand' }),
  connectAutocomplete(({ indices, instantSearchInstance }) => {
    /* use indices.map(index => index.results.getFacetValues('brand')
      and instantSearchInstance.renderState[rootIndex].refinementList.brand.refine
    */
  })({}),
]);

[dianeba3]

Hmmm ok not sure this makes sense to me. Is there a sandbox out there with a live example using multi index querying with one refinement list? Like this one: https://codesandbox.io/p/sandbox/github/algolia/doc-code-samples/tree/master/react-instantsearch/multi-index-hits

[dianeba3]

I want to clarify what I'm trying to achieve. I'm working with multiple indices, where each index belongs to a category I refer to as a "product." Each index is associated with a product, and a single product can have multiple indices.

I've managed to set up a simple query that searches across all the indices. However, I'm now facing a challenge with implementing a refinement list for products. I want to enable filtering by products—essentially, I want to display a list of all products, and when a user selects one, the query should update to search only within the indices associated with that chosen product.

I understand that RefinementList is always based on a single index so is there a way with instantsearch to change which indices are being searched through quickly like within 'products' or achieve something similar?

[Haroenv]

InstantSearch will search through all indices that are added. If you want to limit the indices, you can do removeWidgets to all non-selected indices.

There's no example of what I described earlier, and I'm doubting that it's actually what you want based on the later description.

[dianeba3]

Makes sense thanks!

Another question - I want to make a refinement list for these queries. For context, each index I'm searching through belongs to a "product" - there can be multiple indices under one product. How can I create a refinement list of products without fetching the list products beforehand? I tried creating a refinement list but it only ever displayed the product of the first index and not the rest. I was trying to do something like below but it wasnt working.

const searchClient = algoliasearch('', '');
const indexes = ['index1', 'index2', "index3"];

// Create a search instance
const search = instantsearch({
  indexName: indexes[0], // Primary index
  searchClient,
});

// Add common widgets (like the search box)
search.addWidgets([
  instantsearch.widgets.searchBox({
    container: '#search-box',
    placeholder: 'Search...',
  }),
  instantsearch.widgets.configure({
    hitsPerPage: 3,
    attributesToSnippet: ['content:50'],
  }),
]);

function renderMergedHits({ indices, widgetParams }) {
  if (!indices || !Array.isArray(indices)) {
    console.error("indices is undefined or not an array", indices);
    return;
  }
  const mergedHitsHTML = indices
    .flatMap(({ hits }) => hits || [])
    // .sort((a, b) => a.title.localeCompare(b.title)) // Sorting by title alphabetically
    .map(
      (hit) => `
      <div style="border:1px solid black; margin: 20px; padding: 10px;">
        <h1>${instantsearch.highlight({ hit, attribute: "title" })}</h1>
        <a href="${hit.url}">${hit.url}</a>
        <h3>${hit.product}</h3>
        <p>${instantsearch.highlight({ hit, attribute: "description" })}</p>
        <p>${instantsearch.snippet({ hit, attribute: "content" })}</p>
      </div>`).join("");

  widgetParams.container.innerHTML = mergedHitsHTML;
};

// function renderFilterList({ indices, widgetParams }) {
//   // if (!indices || !Array.isArray(indices)) {
//   //   console.error("indices is undefined or not an array", indices);
//   //   return;
//   // }
//   const mergedFilters = indices
//     .flatMap(({ products }) => product || [])
//     .map(
//       (product) => `
//       <div style="border:1px solid black; margin: 20px; padding: 10px;">
//         <h1>${product}</h1>
//       </div>`).join("");
//   widgetParams.container.innerHTML = mergedFilters;
// };

const customMergedHits = connectAutocomplete(renderMergedHits);
// const customRefinementList = connectRefinementList(renderFilterList);

// Add the custom widget to InstantSearch
search.addWidgets([
  customMergedHits({
    container: document.querySelector("#merged-results")
  }),
  // customRefinementList({
  //     container: document.querySelector("#filters"),
  //     attribute: "product",
  //   }),
]);

// Attach each index for multi-index querying
indexes.slice(1).forEach(( indexName ) => {
  console.log(indexName)
  // Try to check if the index exists using the search client
  searchClient
    .initIndex(indexName)
    .search('')
    .then(() => {
  // const indexWidget = instantsearch.widgets.index({ indexName });
  search.addWidgets([
    instantsearch.widgets.index({
      indexName: indexName 
    }),
    // customRefinementList({
    //   container: document.querySelector("#filters"),
    //   attribute: "product",
    // }),
  ])
  // search.addWidgets([indexWidget]);
 }).catch((error) => {
  // If the index doesn't exist or there's an error, log it and skip it
  console.warn(`Index ${indexName} does not exist or failed to load:`, error);
});
});

search.start();