Vue-instantsearch: Duplicate facets inside the request

[msassa]

Bug 🐞

What is the current behavior?

I posted a comment here https://github.com/algolia/instantsearch.js/issues/3278#issuecomment-484128687
And a post here https://discourse.algolia.com/t/ais-configure-cause-multiple-hit-to-algolia-api-doubling-the-facet-filter/7565

Simple showing or hidding a div cause multiple request to algolia api, and in every request the facets are duplicated.

Make a sandbox with the current behavior

What is the expected behavior?

No making extra request, and NOT duplicate de facet

Does this happen only in specific situations?

I think is only when I add the ais-configure, without this component doesn't happen

What is the version you are using?

    "algoliasearch": "^3.32.1",
    "instantsearch.js": "^3.4.0",
    "vue-instantsearch": "^2.0.1",

[francoischalifour]

Thanks for reporting the issue. As mentioned in your message, this is tracked in algolia/instantsearch.js#3278 and comes from the InstantSearch.js connectors. We're aware on this problem and will try to make some time to fix this issue.

In the mean time, did you try this solution?

[msassa]

Sorry, but I do not understand the proposed solution.
In addition, there is the problem of multiple request. Each time I click on the button to show / hide the menu, it makes several requests to Algolia, and executes the write method of the router, where I send information to the analytics.
Those additional requests, should also be a bug, since I'm only hiding a div, it does not make sense to make a new request to Algolia.

[samouss]

Hi @msassa, sorry about the delayed answer. We didn't find a proper solution to fix the issue yet inside Vue InstantSearch. The root of the issue come from an internal function of InstantSearch.js. It happens because the ais-configure widget triggers a useless re-render. Most of the time, this is because a value is inlined inside the template. Here it's not the case. It happens because we use $attrs to allow any props provided to the widget to be used as parameters. The downside of this is that the reference change between render which triggers an internal update for Vue InstantSearch.

The only workaround we've found is to re-implement the ais-configure widget with the mixin that we expose with Vue InstantSearch. With this solution, you can expose a prop on the widget that takes an object which contains a list of search parameters to apply on the request. Here is the implementation (see below). You can find a complete example on CodeSandbox.

import { createWidgetMixin } from 'vue-instantsearch';
import { connectConfigure } from 'instantsearch.js/es/connectors';

export default {
  name: 'CustomConfigure',
  mixins: [createWidgetMixin({ connector: connectConfigure })],
  props: {
    parameters: {
      type: Object,
      required: true,
    },
  },
  computed: {
    widgetParams() {
      return {
        searchParameters: this.parameters,
      };
    },
  },
  render() {
    return null;
  },
};

You can use it like this:

<template>
  <!-- ... -->
  <custom-configure :parameters="parameters" />
</template>

<script>
export default {
  data() {
    return {
      //...
      parameters: {
        hitsPerPage: 4
      }
    };
  }
};
</script>

Hope that helps, let us know if it fixes your issue or if you have any questions.

[msassa]

Hi @samouss thank you so much for this help.
I can apply this fix, and actually works.
I found a similar issue with ais-current-refinements and like @Haroenv say in the Algolia forum was an array prop I'm passing to that component to use as exclude-attributes. I remove that prop, and now works fine.
Thanks again.

[msassa]

Hi everyone, after add some new filters, like distance and zipcode, the problem appears again.
I make a ticket here: https://discourse.algolia.com/t/vue-instant-search-keep-duplicating-the-facets-in-request/8210
If someone can help me to solve this, please, I will be very grateful.
Thanks

[Haroenv]

We are very close to solving this issue. You can help us try it out if you build (yarn; yarn build; yarn pack) in InstantSearch.js and then install the created gz in your Vue InstantSearch project. Sorry that this has taken long.

[Haroenv]

I have just released InstantSearch.js 3.6.0 with this fix.

[Haroenv]

Vue InstantSearch 2.3.0 has this fix: https://codesandbox.io/s/check-extra-request-higuj

[msassa]

Thank you so much @Haroenv
This was an issue for so long to my app, and now updating the packages is solved.
Thanks !!!

[profhouse]

Hi @msassa, sorry about the delayed answer. We didn't find a proper solution to fix the issue yet inside Vue InstantSearch. The root of the issue come from an internal function of InstantSearch.js. It happens because the ais-configure widget triggers a useless re-render. Most of the time, this is because a value is inlined inside the template. Here it's not the case. It happens because we use $attrs to allow any props provided to the widget to be used as parameters. The downside of this is that the reference change between render which triggers an internal update for Vue InstantSearch.

The only workaround we've found is to re-implement the ais-configure widget with the mixin that we expose with Vue InstantSearch. With this solution, you can expose a prop on the widget that takes an object which contains a list of search parameters to apply on the request. Here is the implementation (see below). You can find a complete example on CodeSandbox.

import { createWidgetMixin } from 'vue-instantsearch';
import { connectConfigure } from 'instantsearch.js/es/connectors';

export default {
  name: 'CustomConfigure',
  mixins: [createWidgetMixin({ connector: connectConfigure })],
  props: {
    parameters: {
      type: Object,
      required: true,
    },
  },
  computed: {
    widgetParams() {
      return {
        searchParameters: this.parameters,
      };
    },
  },
  render() {
    return null;
  },
};

You can use it like this:

<template>
  <!-- ... -->
  <custom-configure :parameters="parameters" />
</template>

<script>
export default {
  data() {
    return {
      //...
      parameters: {
        hitsPerPage: 4
      }
    };
  }
};
</script>

Hope that helps, let us know if it fixes your issue or if you have any questions.

Issue with duplicated requests when ais-configure component is used still exists :(. Workaround with custom configuration component don't work :/.

"vue-instantsearch": "^3.4.2",

[wildabeast]

This fixed it for me! https://www.algolia.com/doc/guides/building-search-ui/going-further/conditional-requests/js/#overview