Backend search with query suggestions and VueInstant Search

Hello Everyone,

I have integrated Algolia into my project.

MY SETUP

  • Laravel backend API - where algolia connection lives, I can query index and populate it and that part is fine.

  • I have nuxtJS with vuetify - so far I used Vuetify autocomplete component and managed to display results in a dropdown using snippets of results

  • currently trying to switch away from vuetify autocomplete to vue instantsearch as per algolia docs

GOAL

I am trying to get the backend search to work with Vue Instant Search components and query suggestions.

PROBLEMS

I have almost no clue how to do it. So far I have built my own connection function that goes into search-client

customSearchClient () {
      const that = this
      return {
        search(requests) {
          return that.fetchContainers({ criteria: { query: 'super' }, updateStore: false }).then(response => {
            // console.log({ response }, typeof response)
            return { results: response.data.hits }
            // return response
          })
        }
      }
    }

And that gets me data but the problem is that I get these weird errors like

index.js?b7c1:238 Uncaught (in promise) TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at new SearchResults (index.js?b7c1:238:1)
    at eval (algoliasearch.helper.js?ea40:1342:1)
    at Array.forEach (<anonymous>)
    at AlgoliaSearchHelper._dispatchAlgoliaResponse (algoliasearch.helper.js?ea40:1336:1)

That is where I am confused, this is my code that I am trying to get to work

<ais-instant-search
    :search-client="customSearchClient()"
    index-name="containers_index_query_suggestions"
  >
    <ais-configure :hitsPerPage="5" />
    <ais-autocomplete>
      <template v-slot="{ currentRefinement, indices, refine }">
        <vue-autosuggest
          :suggestions="indicesToSuggestions(indices)"
          @selected="onSelect"
          :input-props="{
            style: 'width: 100%',
            onInputChange: refine,
            placeholder: 'Search here…',
          }"
        >
          <template v-slot="{ suggestion }">
            <ais-highlight attribute="query" :hit="suggestion.item" />
          </template>
        </vue-autosuggest>
      </template>
    </ais-autocomplete>
  </ais-instant-search>

index-name seems to be required but I have it defined on the frontend so I am not sure why would I need it here, I am so lost. I don’t understand why is that required and how to make suggestions to work in the first place as there is very little info on that in docs (for the backend).

Can anyone advise?

@robert.kabat.tcz would you be able to share a Code Sandbox of your frontend?