React-instantsearch: How to use a refinement on every request to lock down results

[dericcain]

I have a index that contains a list of products. On a specific page on my site, I only want to show products with an attribute of color="red" and size="small". These constraints need to be transparent to the user and need to persist with every search at all times.

Now I saw this guide on virtual widgets, but I found it to be confusing and did not understand how I could apply that to my situation.

Any help would be great!

[Haroenv]

You can use filters prop in Configure

[mthuret]

Hi @dericcain, in your case if you use the virtual widget you could have something like:

import {InstantSearch, SearchBox, Hits} from 'react-instantsearch/dom';
import {connectMenu} from 'react-instantsearch/connectors';

const VirtualMenu = connectMenu(() => null);
const RedColor= () => <VirtualMenu attributeName="color" defaultRefinement="red"/>;
const SmallSize = () => <VirtualMenu attributeName="size" defaultRefinement="small"/>;

const App = () =>
  <InstantSearch
    appId="..."
    apiKey="..."
    indexName="..."
  >
    <SearchBox />
    <RedColor/>
    <SmallSize/>
    <Hits/>
  </InstantSearch>;

Is it clearer? Did you try it?

[dericcain]

@mthuret I see now. I did not understand why the docs would use a VirtualMenu but now it makes sense. I believe I will update the docs to be more explicit about why the use of the VirtualMenu was chosen.

Thanks!

[romafederico]

Hey! Thanks for posting this... it may help with an issue I have so here is another question.

Looking at the code @mthuret posted, I assume that the attributeName="color" is on the root of the hit... right? Something like:

[
  {
    attributeName: "color",
   }
]

How about nested attributes? Let's say...

[
  {
    product:
      [ {
        name: "Super Product",
        attributeName: "color",
        }, ],
   }
]

How do we look for values inside nested attributes?

[Haroenv]

How would you like the refinement to look, for any or all attributeName with that value @romafederico ?

[romafederico]

Thanks @Haroenv ... thanks to your other comments and @mthuret 's I was able to make this work.