How to perform OR operation between attributes in React Instantsearch

[callmekatootie]

I have a use case where between two refinement lists (that is, I have two refinement lists for two different attributes) I need the search results to be OR'ed.

I am using hooks to create my own UI. My user will select a value from the first refinement list and another value from the second refinement list. The search results should contain hits that either match first refinement list value OR second refinement list value (or both).

I understand that in the api, we would use the filters parameter to pass the filter as foo:value1 OR bar:value2, but I am wondering if there's a Reactjs way to do it - without explicitly setting the filter parameter. Is useConfigure() the way to go about it? Or there's another approach.

[Haroenv]

In React InstantSearch all widgets are indeed implicitly "and"ed. You have two options:

1. you are using no other widgets like refinementList, menu, hierarchical menu:

Then you can use the facetFilters search parameter, formatted like [["foo:value1"],["bar:value2"]]

2. You do have other refinement widgets

Then you use the filters parameter, formatted like foo:value1 OR bar:value2

InstantSearch, or even the underlying helper does not have a way to do disjunctions across different attributes. Often a solution can be found where you for example merge both into one list, or other UIs. People in general expect filters to be joined conjunctively, but your UI may work differently.

[callmekatootie]

If we take this approach (of using the filters v/s using hooks), I suppose we will have to maintain our own state of active refinement values for both attributes? Because I find that using useCurrentRefinements() hook with the two attributes as includedAttributes does not return any values for active refinements, even though they are set (through filters)... Furthermore, using useRefinementList() hook to build our custom UI also does not work - isRefined is still false for the selected filter... Just confirming if that is expected behaviour or a bug (or maybe a bad implementation / execution on my part).

[Haroenv]

that would depend on how exactly you've implemented this. Another approach also is to only consider this for the actual parameters sent to the engine, not for the ui (which keeps AND):

const client = algoliasearch();
const search = client.search;
client.search = function search(queries) {
  return search(queries.map(query => transformQuery(query));
}

<InstantSearch searchClient={client}>