hierarchical menu is not returning sub level data

🐛 Bug description

I’m implementing a custom hierarchical menu with Svelte leveraging the connectHierarchicalMenu connector. I’m able to display the first level of the menu but not the second when I click on a first level entry. At init, I’m getting the following error :

Uncaught (in promise) TypeError: Cannot read property 'data' of undefined
    at Object.render (connectHierarchicalMenu.js:182)
    at index.js:372
    at Array.forEach (<anonymous>)
    at Object.render (index.js:364)
    at InstantSearch.js:105
    at defer.js:24

And when I’m console.log the items returned by Algolia, the data property is always null whereas I guess it should be filled with the information of the sub level if relevant. Here is a console.log exemple below after clicking on Vegetables (root level entry). I assume that data should be filled with the sub level information.

0: {count: 11, isRefined: false, exhaustive: true, data: null, label: "Baby Food", …}
1: {count: 2, isRefined: false, exhaustive: true, data: null, label: "Bakery", …}
2: {count: 21, isRefined: false, exhaustive: true, data: null, label: "Beverages", …}
3: {count: 74, isRefined: false, exhaustive: true, data: null, label: "Eggs & Dairy", …}
4: {count: 69, isRefined: false, exhaustive: true, data: null, label: "Fruits", …}
5: {count: 7, isRefined: false, exhaustive: true, data: null, label: "Meat & Fish", …}
6: {count: 117, isRefined: false, exhaustive: true, data: null, label: "Pantry", …}
7: {count: 137, isRefined: true, exhaustive: true, data: null, label: "Vegetables", …}

Additional context

Here is my component code

//hierarchical-menu.svelte

<script>
  import { connectHierarchicalMenu } from "instantsearch.js/es/connectors";
  import HierarchicalList from "./hierarchical-list.svelte";
  import { onMount } from "svelte";

  let items = [];
  let isShowingMore;
  let refine;
  let toggleShowMore;
  let createURL;
  let widgetParams;
  let containerEl;

  const renderHierarchicalMenu = (renderOptions, isFirstRender) => {
    items = renderOptions.items;
    isShowingMore = renderOptions.isShowingMore;
    refine = renderOptions.refine;
    toggleShowMore = renderOptions.toggleShowMore;
    createURL = renderOptions.createURL;
    widgetParams = renderOptions.widgetParams;

    console.log(items);
  };

  const algoliaHierarchicalMenu = connectHierarchicalMenu(
    renderHierarchicalMenu
  );

  onMount(async () => {
    const algoliaModule = await import("../../modules/algolia");
    const { algoliaSearch } = algoliaModule;
    algoliaSearch.addWidgets([
      algoliaHierarchicalMenu({
        container: containerEl,
        attributes: [
          "hierarchical_categories_en.lvl0",
          "hierarchical_categories_en.lvl1",
        ],
      }),
    ]);
  });
</script>

<div bind:this={containerEl}>
  <HierarchicalList {items} {createURL} {refine} />
</div>

//hierarchical-list.svelte

<script>
  export let items = [];
  export let refine;
  export let createURL;

  const handleClick = (event) => {
    refine(event.target.dataset.value);
  };
</script>

<ul>
  {#each items as item}
    <li>
      <a
        href={createURL(item.value)}
        on:click={handleClick}
        data-value={item.value}
        class:font-medium={item.isRefined}>
        {item.label} ({item.count})
      </a>
      {#if item.data}
        <div class="pl-2">
          <svelte:self items={item.data} {createURL} {refine} />
        </div>
      {/if}
    </li>
  {/each}
</ul>

And here is how are stored the hierarchical categories on Algolia :

{
  "hierarchical_categories_en": {
    "lvl0": "Vegetables",
    "lvl1": "Vegetables > Mediterranean"
  }
}

I also activated the facets in the dashboard.

I’m using instantsearch v4.7.2

[jonadeline]

Ok I see. I close the issue. Thanks for the quick support @Haroenv. 🤙

[Haroenv]

Excited to see your svelte InstantSearch, don’t hesitate to share on https://discourse.algolia.com once you’re done!