How to set initialUiState refinements in instantsearch.js

I’m using instantsearch on page, not as an app, as part of a PHP application.

When the page loads, some sitewide user preferences might already be set, like the state/province where the user wants to send items.

I would like to be able to set that at the time page loads. In this case, the shipstate attribute has an array of values (of state abbreviations) and I only want to return items that match one of those array values.

I’ve attempted a few variations, but can’t find one that works. Here’s the current one.

const search = instantsearch({
    indexName: 'my_index_name',
    searchClient,
    initialUiState: {
        my_index_name: {
            query: 'cabernet',
            refinementList: { 
                 shipstate: ['AL'], 
                 varieties: ['Cabernet Sauvignon'], 
            },
         }
     }
});

The query is working correctly, as is the varieties filter, but I’m not getting any filtering on the shipstate.

In my index settings:

  • shipstate is a searchable attribute
  • shipstate is set as an attribute for faceting (though I’m not displaying it) and is set as “filter only”

UPDATE: It turns out that you must display a facet for it to work. As I didn’t want to display this facet as part of instantsearch for a variety of reasons, I built the widget and used CSS to hide it. At that point the filtering worked as expected.