How to perform a “silent” fallback search in React InstantSearch without losing facet sync or overwriting the user’s query

[1127461-Mike]

Hi everyone!

I’m working on a React InstantSearch project and need to handle a scenario where the main index finds no results for a user’s query.

Specifically:

1. I call an external API for additional keywords or fallback suggestions.
2. I want to inject these suggestions back into my Algolia search so it can return relevant products—without losing the InstantSearch facet synchronization and without overwriting the user’s typed query in the search box.

What I’ve Tried

1. If I do a separate search using the raw Algolia client, the facet data won’t match what React InstantSearch expects (since InstantSearch only knows about its own queries).
2. If I refine the user’s query directly (e.g., refine("my fallback terms")), it can overwrite the text in the search box, which is not desirable.

Desired Outcome
A “silent” fallback flow:

1. User types “XYZ,” main index yields zero hits.
2. I call the external API to fetch fallback suggestions.
3. I re-run the search with these suggestions “behind the scenes,” so the facets stay in sync, and the user’s original query remains in the .

Does anyone have a recommended pattern or code snippet showing how to achieve this? Perhaps a custom connector approach or additional filters that doesn’t overwrite the user’s visible query?

Thanks in advance! Any guidance or examples are much appreciated.

[dhayab]

You could wrap your results with a <NoResultsBoundary> as described in this guide.

Within the <NoResults> fallback component, you can add an <Index> in which you override the search parameters you want.

[1127461-Mike]

Thank you that is already quite usefull to know! However, my main question revolves around facet communication between parent and child indices.

Specifically:

1. How does the child index communicate its facets (e.g., updated counts or new facets) back to the parent index when facets are applied or updated in the child index?
2. Since the parent index and child index each manage their own search state, is there a built-in way to synchronize the facet refinements and data between the two?

For example:
If the parent index shows a refinement list (e.g., categories or styles) based on its own search results, but the child index fetches additional fallback results with its own query, how can those new facets or counts be merged into the parent’s refinement list?
The issue here is that while the child index correctly inherits the parent’s search parameters, the reverse does not seem to happen—the parent isn’t aware of the child’s updated facets or results. This results in a disconnect between the fallback results and the overall user experience in the facet refinements.

Is there a recommended approach for handling this? Or does it require custom logic to manually aggregate and sync facets between the parent and child?

[Haroenv]

the child inherits all parameters from the parent, unless it has a widget that also controls that parameter.

What UI do you have that the child index should have filters that communicate back to the parent?

[1127461-Mike]

Yeah so to clarify:

On the left side of my UI, I display all available facets from the main index. On the right side, I display the product results.

When the component gets mounted (e.g., when the main index has nbHits = 0), I trigger a secondary search in a child (same index as the main index), using parameters fetched from an external API. The product results from this child index show correctly on the right side.

However, the facets on the left side don’t update to reflect the fallback results from the child . This is because the facets are tied to the parent index’s state, while the fallback results are from the child index. (Thats how I believe it works)

Essentially:
The main index handles all the filters and facets on the left. And also the products (if it can find any).

The fallback only updates the product list but has no way to communicate its facet state back to the parent (main) index.
The desired outcome is for the facets on the left to also update dynamically to reflect the fallback results in the child .

So yeah maybe that clarifies the UI perspective a bit better, and also my question in general about what I mean with a "silent" search.

Because the searches in my application can be a bit more complex, I need to call a different API that returns values, which I then use to perform a search in Algolia. This is why I am facing these state issue when I call Algolia like this, React InstantSearch needs to be aware of the way I am calling it.

I hope that clarifies why the child index should have filters that communicate back to the parent!

[Haroenv]

Your understanding of the nesting and inheritance is correct indeed.

That does clarify it, however I'm not sure on how to achieve this. If you'd apply those different parameters, there would be a new search, which then would change the child results again, which seems like it has some looping potential.

I wonder if a more correct approach is to do this logic entirely in the search client level:

1. do a search
2. if no results, do another search
3. return the results of this search

Normally then all facet values should be available as the ones from the final search that happened, and the UI should behave as expected.

the code would look something along the lines of:

const client = algoliasearch();
const search = client.search.bind(client);
client.search = async function(queries) {
  const {results} = await search(queries)
  if (results[0].nbHits === 0) {
    return await search(modify(queries));
  }
  return { results }
}