Fully headless algolia

[sattaman]

I want to use algolia in a fully headless way in React, where it does not take any role in rendering UI, and where i have a separate component responsible for rendering items and filters and have a set filter callback. I have hooked this up and I am setting refinement using setIndexUiState.

I am finding that in order for this to work , I need to force the registration by adding

const ForceWidgetRegistration: React.FC<Props> = ({ plpProps }) => {
  const { attributesToRender } = useDynamicWidgets({ maxValuesPerFacet: 50 })

  return (
    <div style={{ height: 0, overflow: 'hidden', display: 'none' }}>
      <DynamicWidgets>
        {attributesToRender.map((attr) => {
          // numeric facet? you can detect by your own list or facetStats
          // here’s a simple example using facet_stats
          const isNumeric = !!plpProps.filters.find(
            (f) => f.id === attr && f.type === 'Range',
          )
          return isNumeric ? (
            <RangeInput key={attr} attribute={attr} />
          ) : (
            <RefinementList key={attr} attribute={attr} />
          )
        })}
      </DynamicWidgets>
    </div>
  )
}

export default ForceWidgetRegistration

Is there an easy way to force the registration of the refinement facets without adding these RefinementList + RangeInputs?

[Haroenv]

No, InstantSearch works by registering widgets which then keep track of their refinement state to be able to send the search queries and dispatch the results. Instead of forcing the widgets to be registered outside of where you're using it, have you considered using the useRefinementList etc hooks there specifically? that depends on your exact implementation of course

[mmorris8]

If I wanted to do this I'd use instantsearch without the provided react Bridge, and then write my own components. But I don't see the uptick in that.

My own widgets are very different in appearance from the Algolia defaults (https://www.covenanthealth.com/find-a-doctor) and interlace with react-router-dom and react-aria for accessibility, but I've not had cause to supress what Algolia is doing out of the box.

Could you please explain the behavior you seek without delving into the implementation details at first - that can wait until there's a clear understanding of the problem at hand.

[sattaman]

Hi ,

I have a component for PLP rendering which is shared across many apps (a search app using Algolia being one of these), this takes the items + filters to render , and has a callback for filter changes.

I want to hook Algolia up to use this.

I have found what seems to be a better way than I first shared.

import {
  DynamicWidgets,
  useDynamicWidgets,
  useRefinementList,
  useRange,
  useToggleRefinement,
} from 'react-instantsearch'

const VirtualToggle = ({ attribute }: { attribute: string }) => {
  useToggleRefinement({ attribute })
  return null
}
const VirtualRefinementList = ({ attribute }: { attribute: string }) => {
  useRefinementList({ attribute })
  return null
}
const VirtualRange = ({ attribute }: { attribute: string }) => {
  useRange({ attribute })
  return null
}
const ForceWidgetRegistration: React.FC = () => {
  const { attributesToRender } = useDynamicWidgets({ maxValuesPerFacet: 50 })

  return (
    <DynamicWidgets>
      {attributesToRender.map((attr) => {
        const { type } = getFilterType(attr)
        switch (type) {
          case 'Toggle':
            return <VirtualToggle key={attr} attribute={attr} />
          case 'Range':
            return <VirtualRange key={attr} attribute={attr} />
          default:
            return <VirtualRefinementList key={attr} attribute={attr} />
        }
      })}
    </DynamicWidgets>
  )
}

I have something along these lines which maps data in and handles filter events, this is seeming to work

export const useAlgoliaPlpProps = () => {
     const { items: hits, results } = useHits()
     const { setIndexUiState } = useInstantSearch()
     const { items: active } = useCurrentRefinements()
     const { attributesToRender } = useDynamicWidgets({ maxValuesPerFacet: 50 })
     
     const filters: Filter[] = attributesToRender.map(attr => 
          ....
     )
     
     const applyChange = (change) => {
           setIndexUiState((prev) => 
           ....
    }
    
    return {
          items: hits.map(mapHitToItem),
          filters,
          onFiltersChange: (changes) => changes.forEach(applyChange),
    }
}

[mmorris8]

I don't have distinct Virtual widgets. I found that usually any customization I want on the live widgets I usually want when the widget is virtual, so I just made virtual a boolean property of my widgets. For example, my Toggle Switch widget which leverages React Aria. Note that I use the useToggleRefinement hook instead of useDynamicWidgets to get the refine method. Look into that hook and at least useMenuRefinement since it sees the most use. This should help cause at the moment you're swimming against the current hard (No shame in that - I was doing the same roughly a year ago when I was getting started with this).

import { Switch } from 'react-aria-components'
import { useToggleRefinement } from 'react-instantsearch'

export default function SwitchFacet({label, virtual, ...props}) {
  const { value, refine } = useToggleRefinement(props)

  const change = (value) => {
    refine({isRefined: !value})
  }

  return virtual || value.count === null ? null : (
    <Switch isSelected={value.isRefined} onChange={change}>
      <div className="indicator" />
      {label}
    </Switch>
  )
}