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();

[dianeba3]

@Haroenv two questions:

1. How can I start a search instance with a query already set up? I am trying to save the index and query saved in the URL but when I reload the tab the query goes away. How can I start it the instance with a query already?
2. Is it any different with multi index search? I have an app right now with multi index searching but in an update function I am using search.reload() is that affecting my ability to start an instant search instance with a query already?

Are there any sandbox demos with an example of this already?
Thanks! Any help would be appreciated

[Haroenv]

1. use the routing feature
2. no, routing supports multi-index

most examples, like https://githubbox.com/algolia/instantsearch/tree/master/examples/js/e-commerce have routing enabled

[dianeba3]

Hi @Haroenv thanks so much for all of your help so far!

Since I am doing multi indexing with quite a few indices there will be times when or two of the indices cannot be found or was not indexed correctly so it won't work on instant search. How can I check or validate the indices before running or while running the instant search app? I have checked all of the indices right now but I tried running it with an index that I know doesn't work and it broke my whole site and wouldn't load anything. How can I prevent that? I tried fetching the current working indices from Algolia but that requires using the Admin API key which is not possible in this case (const { items: existingIndices } = await client.listIndices();) so how can I validate indices without it breaking my instantsearch app?

[Haroenv]

It will require N network requests as multi-index search requires all indices to exist, but you can do

const existing = await Promise.all(indexNames.map(indexName => client.search([{ indexName }]).then(() => true).catch(() => false))

What you can also do is run the listIndices code in your backend and call that before returning your frontend page so you don't need to expose an api key with the listIndices ACL.

You can actually create an api key with just search, listIndices ACLs as well, so you don't need an admin api key