HierarchicalMenu not displaying attributes

[lukagrbec]

Hi,

I would like to display certain categories in the hierarchical menu, but it doesn't show anything.
This are my imports:

import {
  InstantSearch,
  HierarchicalMenu,
  RefinementList,
  SortBy,
  Pagination,
  ClearRefinements,
  Highlight,
  Hits,
  HitsPerPage,
  Panel,
  Configure,
  SearchBox,
  Snippet,
  ToggleRefinement,
} from 'react-instantsearch-dom';
const searchClient = algoliasearch(
  '',
  ''
);

This is how I am using the hierarchical menu:

<Panel header="Category">
                <HierarchicalMenu
                  attributes={[
                     'categories.lvl0',
                     'categories.lvl1',
                  ]}
                />
              </Panel>

This is how the item is saved in algolia:

{
  "izdelek": "PURANJI FILE, CCA.3KG",
  "opis": "/",
  "cena": "5",
  "categories.lvl0": "products",
  "categories.lvl1": "products > meso",
  "objectID": "1f9997ec28828c_dashboard_generated_id"
}

What could be the reason that they aren't being displayed?
Any help would be appreciated!

[francoischalifour]

Hey, can you please replicate the behavior in this React InstantSearch sandbox?

[miag676]

Hello, thanks for providing me with the sandbox.
I tried it using my algolia search client key and the names of the products and their description (in hits) are mapped correctly (their attributes are "izdelek" and "opis"). However, if I try replacing the attributes with the attribute "category.lvl0" or "category.lvl1" it doesn't show them in hits.

Another problem is the refinement list, which isn't displayed even if I set the attribute "izdelek" for example. It sort of does the same if I replace the attribute "brand" with "name" in the original sandbox you provided.

I am attaching the screenshot from algolia dashboard with searchable attributes and ranking and sorting:

Should I set the attributes in any other settings?

[Haroenv]

I see what's happening. React InstantSearch doesn't expect . to be part of an attribute, but rather be a hierarchy:

{
  "categories": {
    "lvl0": "...",
    "lvl1": "..."
  }
}

You could change your records to be of this shape, or have a single level and avoid the letter . in the attribute.

Hope that helps! otherwise please create a sandbox

[miag676]

Thanks for the suggestion. It works with displaying categories in hits, however, it still doesn't work in the refinement menu. Should I share a sandbox with the keys to my index? There's no problem from my side to create a sandbox, I'm just not sure whether it's secure to share it.
Otherwise, the same thing occurs if I change the attribute on the sandbox you provided from "brand" to "name".

[Haroenv]

if this is the behaviour you mean, it's because name is not set up in attributesForFaceting in the index settings https://codesandbox.io/s/new-waterfall-uok82?file=/src/App.js

If your app will be published on the public internet later it's safe to post in a public forum like this, otherwise contact [email protected] with a private sandbox

[francoischalifour]

Did you declare categories.lvl0 and categories.lvl1 in attributesForFaceting?