Cannot filter by individual field

I am trying to use instantsearch just like this:

const { setIndexUiState, results, indexUiState } = useInstantSearch()

I then try to update the “handle” to the a specific value upon page load:

if (leafCategories) {
  setIndexUiState((prevIndexUiState) => ({
    ...prevIndexUiState,
    refinementList: {
      ...prevIndexUiState.refinementList,
      handle: ["leitungsdose-3-p-z-4-l-sw-10-mspez"],
    },
  }))
}

However, Algolia always returns unfiltered objects like default.

Yes, I have added “handle” to searchable and retrievable keys. I have really no idea what is going on…

Would be amazing if anyone could give us a quick pointer here. We really just want to prefilter the page based on another prop (handle) before the results show. We have no facets or other filters on the website so far. It should be straight-forward, I just can’t seem to figure it out right now.

@michael.king sorry for pinging you directly, but do you have a quick idea or pointer? this is really blocking us from going live atm. Sorry to bother :pray:

@ben.turner

I’ve only used RouteToState to manipulate state info so I don’t have a good working example to share, but looking at the code in the docs, I notice the state info is scoped to an index and particular widget:

const indexName = 'instant_search';
setIndexUiState((prevUiState) => ({
  ...prevUiState,
  [indexName]: {
    ...prevUiState[indexName].refinementList,
    refinementList: {
      ...prevUiState[indexName].refinementList,
      discounts: ['-50% off', 'free shipping'],
    },
  },
}));
const ProductCategories = () => {


  const { indexUiState, results, setIndexUiState } = useInstantSearch()
  const productHits: ProductHit[] | undefined = results?.hits

  useEffect(() => {
    const indexName = "products"
    setIndexUiState((prevUiState: any) => ({
      ...prevUiState,
      [indexName]: {
        ...prevUiState[indexName].refinementList,
        refinementList: {
          ...prevUiState[indexName].refinementList,
          handle: [
            "bosch-rexroth-r900424199-druckbegrenzungsventil-dbdh-6-k1x100",
          ],
        },
      },
    }))
    
  }, [])

  return (
....

I am trying to do this. The ProductCategories is wrapped into the InstantSearch Component like this:

       <InstantSearch
              indexName={SEARCH_INDEX_NAME}
              searchClient={searchClient}
            >
              <ProductCategories />
     </InstantSearch>

This always throws this error:

TypeError: Cannot read properties of undefined (reading 'refinementList')

And the uiState is an empty object {}.

I have seriously tried everything in the Algolia Docs… I am sort of giving up soon

const ProductCategories = () => {
  const { indexUiState, results, setIndexUiState } = useInstantSearch()
  const productHits: ProductHit[] | undefined = results?.hits

  console.log("PRODUCTS", productHits)

  return (
....

This is working though - just not filtered. It simply returns the first N entries from my index (which I do not want).

I must be missing some small detail.
Maybe the UI is misconfigured? I had it before in the past that something in the Algolia UI was not “activated” or configured, so nothing worked, without any log or error warnings.

Where is the <RefinementList> itself defined in relation to you ProjectCategories object? Is it possible the RefinementList hasn’t mounted yet when you go to retrieve its state?

Any chance you have a CodeSandbox or similar so I can get a little more context?

Not sure if this helps, but I found a very specific issue around using setIndexUIState with filterOnly attributes:

Some customers have reported they could not use the “Facet filters” option from the Dashboard > Add Query Parameters modal with attributesForFaceting that are set as filterOnly() while it’s working as expected with searchable() ones.

Here was the solution for that issue, including a codesandbox:

The uiState reflects the mounted widgets, since the type attribute is not tied to a widget, setting the uiState has no impact.
If you add a virtual <RefinementList> widget for the type attribute, it works:>