Vue RefinementList component: transformItems vs. limit


I’m entirely new to Algolia and currently working with the ais-refinement-list component in Vue.

I’ve run into a problem with how items are counted after a transformItems method has been applied.

What I’m tryin to achieve

To have a number of refinement lists based on different branches from a hierarchical taxonomy, with limit and show-more.
The taxonomy is generated by Wordpress.

My current method

The only way to achieve this, as far as I can tell, is to set the entire level from the hierarchy as the attribute.
E.g. (pseudo-code):

      :transformItems="items => filterItems(items, path)"

This of course requires me to filter out a lot of items for each refinement list.
The filterItems method takes all of the items from the level and a path.
The method compares the item.label with the path, if the beginning of the label matches the path, the item is pushed to the array that is returned from the filter method.

The problem / My theory

Let’s say I start out with 40 items. After transformItems has done its thing I end up with 15 items. My limit is set to 10 items, but what I’m seeing in the end might only be 3 items.

I’m guessing this is because limit is compared to the length of the original array of items and not the array returned from transformItems.


1. RefinementList better hierarchy support

I would much prefer no to have to do the filtering at all, but it doesn’t seem possible to point to a specific branch/node in the hierarchy. Is this correct, or am i missing something?

2. transformItems / limit — Fix or workaround

I haven’t been able to get these two to play well together, even though I’ve tried various things.

Any help would be appreciated.



It looks like what you’re trying to achieve is a hierarchical menu?

Note that transformItems is called once the facet values are truncated to the limit. You might want to increase the limit option and to return only a custom number of items in the filterItems function.

If this doesn’t help you in any way, please reproduce the issue on this Vue InstantSearch sandbox so that we can help you more easily.

Thanks. A hierarchical menu is not what I’m looking for, unless selecting multiple items in a hierarchical menu is possible?.

I ended up customizing the component via slot-scope, and implement my own limit and show-more.

I don’t know how much of an edge case this was, but in my opinion having the limit applied before, and not after transformItems makes the builtin limit and show-more feature pretty useless, when transformItems return an array with fewer items than the original items array.

Hi @pxl. Thank you for your feedback. Let me try to explain the spirit in which limit was introduced.

limit passed to the component is taken into account in the engine. This comes in useful for users that have thousands of facet values on there index and want to improve performance. This is obviously not your use case.

However transformItem is a function that runs in the browser.

For your use case, you can use transformItems and call .filter() or .splice().

Hi Youcef,

Thanks for the clarification. I’m obviously trying to do something the show-more functionality wasn’t intended for, but have found the workaround for my situation, so it’s all good.