Vue-instantsearch: Accessing the Algolia API full response

[francescobm]

Hi,

I am using vue-instantsearch for my ecommerce and have to say it's very handy and intuitive.
However, I can't find a way to access the full response from the API.

If I check the network the endpoint is returning some properties other than the hits object. However, seems that the implementation like below is only allowing to access the hits object.

<template>
  <ais-index 
    :app-id="algoliaConfig.id" 
    :api-key="algoliaConfig.key" 
    :index-name="algoliaConfig.index" 
    :query-parameters="{hitsPerPage:33}">
  <ais-results>
       loop over results
   </ais-results>
  </ais-index>
</template>

<script>
  // here I need to be able to see the full API response 
  // so that I can access the other properties
  export default {
    data () {}
  }
</script>

[Haroenv]

which other properties do you need access to?

[francescobm]

A property called 'facets_stats' which is giving me max and min price of my hits for example

[rayrutjes]

I think we can expose the last response from the store so that you can deal with it as you wish.

You would access it like so:
store.lastResponse

WDYT @francescobm ?

[francescobm]

That would be much appreciated,

I assume it will take a bit of time before the release of this feature, so for the time being I'll have to give up the vue-instantsearch components and I'll manually do a POST request to retrieve hits and facet_stats.

Thanks a lot for your work !

[Haroenv]

In the meantime you can use store._helper.lastResponse

[francescobm]

I've been able to find it in
this.searchStore._helper.lastResults._rawResults[0].facets_stats

[Haroenv]

Thanks for sharing your workaround @francescobm, we'll expose this simpler soon, it's also useful for query rules ( #306 )

[francescobm]

Full example here, I forgot to mention that of course lastResults is asynch, so needs to be watched in order to be accessed. Would be nice to have a promise accessible from the custom component or the component where I declare ais-index

<template>
  <div>
    {{ priceStats.min }}
    {{ priceStats.max }}
  </div>
</template>

<script>
  import { Component } from 'vue-instantsearch'
  export default {
    mixins: [Component],
    data () {
      return {
        priceStats: {
          min: null,
          max: null
        }
      }
    },
    watch: {
      'searchStore._helper.lastResults': function (newVal, oldVal) {
        Object.assign(this.priceStats, newVal._rawResults[0].facets_stats.price)
      }
    }
  }
</script>

[rayrutjes]

Would be nice to have a promise accessible from the custom component or the component where I declare ais-index

@francescobm not sure I understand what you mean, could you adapt your example with your ideal usage implementation?

[Haroenv]

this is addressed in v2 #416 (more specifically #505)