Search code examples
react-instantsearchtypesense

React InstantSearch: RefinementList filters overrides Configure filters

Question

How can I apply custom search filters in a way that is compatible with the filters being applied by the RefinementList?

Background

I am trying to design search functionality where users can search in two ways:

  1. The "normal" way of searching for a given string to appear anywhere in any search document
  2. A specific lookup of a given set if IDs. Users would expect the search result to be all of the search documents that contain any of the IDs given. No more, no less.

I switch from search option one to option two when I detect that the search input contains only IDs in a valid format

Current Implementation

I have found that the easiest way to get my search engine (typesense) to return results for search option two is to only use the filter_by option with an asterisk search, like so:

{
    "query_by":"product_number,ean_number",
    "collection":"products",
    "q":"*",
    "filter_by": "product_number:=[123, 456]"
}

Which will return any search document with product_number 123 or 456.

So, in my custom SearchBox component I call refine('*') and set the filters in the Configure component when I detect that the search should follow option two.

<InstantSearch>
  <Configure facetFilters={ buildFilterBy(...) } />
  <CustomRefinementList {...} />
</InstantSearch>

This works well, but whenever the users selects additional refinements in the CustomRefinementList, the Configure filters are being overwritten and the search now returns all documents that matches the refinements (due to the asterisk search).

Reading around, it seems like I am not supposed to use the Configure component to apply filters beyond the initial search/render. I would think there should be a way to apply filters through the refine function, though the documentation on what parameters beyond the search string therefine function can accept seems a bit lacking.

Solution

  • In the Configure widget, if you use filters (instead of facetFilters or numericFilters), those filters get ANDed to the facetFilters that the RefinementList widget adds. This will effectively give you the ability to set a frozen / permanent filter using Configure.

    You want to make sure you're using v2.4.1 of the typesense-instantsearch-adapter.

    More context here: https://github.com/typesense/typesense-instantsearch-adapter/issues/110#issuecomment-1112633962