Duplicate facets inside the request

[samouss]

Original Vue InstantSearch issue: algolia/vue-instantsearch#587

The issue seems to come from the enhanceConfiguration function that compute the initial search parameters. Inside this function we do a union on of both value when it's an array. It can leads to duplicated value like we have inside this issue. In most cases the problem won't be visible unless in that case with the hot reload.

https://github.com/algolia/instantsearch.js/blob/1e86b2e74064c2334f2eb3c8793c3250b78fe27b/src/lib/InstantSearch.js#L496-L498

cc @dulnan

https://codesandbox.io/s/1qoq47086j

---

Bug 🐞

What is the current behavior?

When using an ais-refinement-list and ais-menu, while also having routing (using historyRouter and simpleMapping) enabled, the hierarchical facets are added multiple times to the search parameters.

A small CodeSandbox showing this behavior:
https://codesandbox.io/s/9324rjjz3p
Upon page load, using the browser's network activity inspector, the request to Algolia servers shows that categories has been added to facets twice.

The bug is especially noticeable when working locally, as every time one changes something in a Vue file and a refresh happens, the duplicated hierarchical facets are duplicated again. Which, due to routing with state mapping being enabled, will result in the app hanging for several seconds or even crashing.

This can best be reproduced by opening components/Facet.vue and adding a line break in the template, so a refresh happens.

What is the expected behavior?

The hierarchicalFacets should only be added once.

Does this happen only in specific situations?

When using ais-menu or ais-refinement-list together with routing enabled.

What is the proposed solution?

Unfortunately I haven't figured out exactly where the bug is coming from.

What is the version you are using?

2.0.0-beta.1

[msassa]

Hello, is any advance on this?

I have a similar problem, but is crashing the entire app.

I'm using vue-instantsearch

I have prepared this example, where I am adding a button to show / hide the menu.

This is a simplified example, but I found in the real application, that after several clicks on that button, Chrome crash.

And it is because every time I click on the button, multiple requests are made to the algolia api.

And in each of them, the 'facets' parameter is duplicated

After dismantling the entire application, and reassembling it component by component, I discovered that this is caused by the ais-configure

Without ais-configure this doesn't happen, and as you can see in the example, is a simple:

<ais-configure :hits-per-page.camel="4"></ais-configure>

Can someone help me solve this, please?

Thank you

[samouss]

Hi @msassa, we've provided a workaround on the Vue InstantSearch issue. Take a look if it can help!

[msassa]

Thank you so much !!
I will continue the feedback in the algolia/vue-instantsearch#663 (comment) if you are ok