Double Query Request when using <ais-hits> inside <ais-state-results>

[jonathan-bird]

Bug 🐞

What is the current behavior?

On initial load, there is two query requests that run to Algolia when using inside

This approach is recommended to handle an empty query (https://www.algolia.com/doc/guides/building-search-ui/going-further/conditional-display/vue/), but creates a double-request.

This is obviously still fast to Algolia.net, but we use middleware currently to transform and add data to the results so this slows down the site, creates unnecessary load, and probably doubles the amount of requests costs to the business.

Make a sandbox with the current behavior

https://codesandbox.io/s/vue-instantsearch-double-query-request-zp7v6?file=/src/App.vue

What is the expected behavior?

One request.

Does this happen only in specific situations?

Only when is set within .

If you move outside of it, it runs once, but then you can't access necessary data (hierachicalFacetsRefinements, page, search, query etc.)

What is the proposed solution?

That the request runs once.

[Haroenv]

Ah yes this is a little tricky. Today ais-state-results doesn't render on initial load to avoid conditional code inside the slot for users. That does mean that the hits widget isn't mounted on initial load, and thus causes a new request since a new widget is mounted on second load

if you remove this condition:

https://github.com/algolia/vue-instantsearch/blob/218238bebfa5330b054c484a0697fcb01bee3f0d/src/components/StateResults.vue#L4

and instead assume that if there's no results, you do want to render the children, the double request will go away

[jonathan-bird]

@Haroenv Hmm ok, so you're saying I'd have to create a custom component to remove that, to fix the double load? Seems a bit of a roundabout way just to show simple 'no results' information.

[Haroenv]

Yes, I agree! I'm going to mark this as an improvement for a future major version, since adding a first render would likely break some applications relying on all keys existing when it renders.

[Haroenv]

This is handled by https://github.com/algolia/vue-instantsearch/pull/1156, as the state-results now always shows thanks for opening this!