hierarchicalMenu connector: receive items with all its nested items from the start

Open Q&A
, ,
#1

Hi there,

I am using connectHierarchicalMenu to integrate it to an Ant design Menu component.
Instant search is built on nextjs with getServerSideProps.

On page render the items props looks like this:

1: {label: "Distribution", value: "Distribution", count: 272, isRefined: false, items: null}
2: {label: "Back Office & Finance", value: "Back Office & Finance", count: 75, isRefined: false, items: null}

Is it possibility to make all items’ nested items directly accessible rather than dynamically after the selected item has been refined?
I would be looking for something like this (change in nested “items”):

[
  { 
    label: "Distribution",
    value: "Distribution",
    count: 272,
    isRefined: false, 
    items: [
      {label: "foo", ...}, 
      {label: "bar", ...}
    ]
  },
  {
    label: "Back Office & Finance",
    value: "Back Office & Finance",
    count: 75,
    isRefined: true,
    items: [
      {label: "foo", ...}, 
      {label: "bar", ...}
    ]
}

Hope my question is clear enough.
In any cases, I love using Algolia, thank you so much.

#2

Hi @julien1, unfortunately only the items which are refined can be shown using a hierarchical menu. The reason is that we need to do an extra query per open leaf of the hierarchical menu, and therefore the widget only will have data for refined items.

If you want a full hierarchy with all leaves open, I’d suggest writing your own widget from scratch, although writing the request logic might not be very easy.

#3

Hi @haroen,
Thanks for the prompt response.
I couldn’t find a clean way around it. My only option is to keep the base component and inject our own style on it.
Thanks!

1 Like