Algolia + Laravel backend API + nuxtJS

I have a Laravel 8 backend API and a completely separate NuxtJS frontend. I have integrated Algolia into the backend API. I have a nice adapter and service and I can search my index.

Now, I am not interested in using scout because I don’t like what it is doing and how it works and that’s not the problem so I would like to leave it out of the discussion.

So I’ve made search work on the frontend with Vuetify autocomplete but I decided to use VueInstant search as this is supposed to save me some work when it comes to integrating query suggestions.

Before I can even get query suggestion I need to get the basic search working with Vue Instant Search.

GOAL

I want to have a VueInstant Search with the backend search client.

WHAT I HAVE SO FAR

THAT IS WITHOUT QUERRY SUGGESTIONS JUST THE BASIC SEARCH WITH VUEINSTANT SEARCH

I have backend code that searches my index. I have the frontend code that creates a new connection to my backend (don’t worry about how it looks like I just need to get this to work first and then I will invest the time to refactor it):

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

And this is my code for the form:

<ais-instant-search index-name="containers-index" :search-client="customSearchClient()"  >
    <ais-search-box />
    <ais-hits>
      <template slot="item" slot-scope="{ item }">
        <h1><ais-highlight :hit="item" attribute="name" /></h1>
        <p><ais-highlight :hit="item" attribute="description" /></p>
      </template>
    </ais-hits>
  </ais-instant-search>

PROBLEMS

I can get the searchbox to show and query if I remove ais-hits tags. As soon as I add them I get weird errors depending on how I format my response from the backend. I just try to pass it as it is.

I went through some debugging and tried to wrap this into various wrappers as they seem to be missing but eventually it always breaks, for example:

algoliasearch.helper.js?ea40:1334 Uncaught (in promise) TypeError: content.results.slice is not a function at AlgoliaSearchHelper._dispatchAlgoliaResponse (algoliasearch.helper.js?ea40:1334:1)

And that is the Algolia code that breaks.

this._currentNbQueries -= (queryId - this._lastQueryIdReceived);
  this._lastQueryIdReceived = queryId;

  if (this._currentNbQueries === 0) this.emit('searchQueueEmpty');

  var results = content.results.slice();

  states.forEach(function(s) {
    var state = s.state;
    var queriesCount = s.queriesCount;
    var helper = s.helper;
    var specificResults = results.splice(0, queriesCount);

    var formattedResponse = helper.lastResults = new SearchResults(state, specificResults);

SUMAMRY

The ideal solution would be to not to use this InstantSearch thing but I have no clue how to manage more than one index on the server side.

Or am I completely wrong about all of that? Anyone can advise?

Hi @robert.kabat.tcz

I’m not as a savvy on building backend search as we tend to recommend keeping search in the front end to reduce latency, but the first thing I noticed is that you customSearchClient code looks to be slightly inside out with your return outside your search() call. I’m wondering if that’s what’s causing the strange behavior?

You have:

      return {
        search(requests) {
          return that.fetchContainers({ criteria: { query: 'super' }, updateStore: false }).then(response => {
            return { results: response.data }
          })
        }
      }

Whereas the example in docs is:

const customSearchClient = {
  search(requests) {
    return fetch('http://localhost:3000/search', {
...
    }).then(res => res.json());
  }
};