Vue-instantsearch: v2 - hierarchical facets added to state several times when using routing

[dulnan]

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

[samouss]

Indeed the facet is added multiple times (2 times on the first render). But this should only happens with the hot reload. It should not happen in production because. The issue still persist on production but with a limited impact (it should not have more than 2 duplicates). The issue is not with Vue InstantSearch but with InstantSearch.js. Close in favor of https://github.com/algolia/instantsearch.js/issues/3278.

[dulnan]

Thanks for your answer! I agree it definitely has a bigger and more obvious impact with local development, but unfortunately we experience the same behavior on production with one of our apps. It also happens whenever a component is rendered conditionally. I made an adjusted version of the sandbox: https://codesandbox.io/s/1qoq47086j (click on the big toggle button)

A solution would be to toggle visibility via v-show, which works fine for smaller components. In our case the component in question contains a map which is quite "heavy", performance-wise, so we can't render it on page load.

[Haroenv]

Just thinking out loud here, is there a possibility for you to use both v-show, but then still do a v-if on the map itself?

[dulnan]

Thought about that too, yes. The custom connector in the component is doing a search to fetch _all_ ~1000 items to show on the map. I'd have to do that in the v-show part to avoid the issue and put the actual map in the v-if part. I would also need to tell the connector to not fetch results when the map is not visible. So it would indeed be possible to avoid the issue!

[Haroenv]

that sounds good, in the mean time, we will of course work on fixing this issue upstream too, but glad you can have a workaround for now