Algolia + Laravel 后端 API + nuxtJS答案

【问题标题】：Algolia + Laravel backend API + nuxtJSAlgolia + Laravel 后端 API + nuxtJS
【发布时间】：2022-11-06 07:07:31
【问题描述】：

我有一个 Laravel 8 后端 API 和一个完全独立的 NuxtJS 前端。我已将 Algolia 集成到后端 API 中。我有一个很好的适配器和服务，我可以搜索我的索引。

现在，我对使用 scout 不感兴趣，因为我不喜欢它在做什么以及它是如何工作的，这不是问题，所以我想把它排除在讨论之外。

因此，我使用 Vuetify 自动完成功能在前端进行了搜索，但我决定使用 VueInstant 搜索，因为这可以在集成查询建议时为我节省一些工作。

在我获得查询建议之前，我需要使用 Vue Instant Search 进行基本搜索。

目标

我想要一个带有后端搜索客户端的 VueInstant Search。

到目前为止我有什么

没有查询建议只是使用 VUEINSTANT 搜索的基本搜索

我有搜索我的索引的后端代码。我有前端代码，可以创建与后端的新连接（不要担心看起来我只需要先让它工作，然后我会花时间重构它）：

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
          })
        }
      }
    }

这是我的表单代码：

<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>

问题

如果我删除ais-hits 标签，我可以让搜索框显示和查询。一旦我添加它们，我就会收到奇怪的错误，这取决于我如何格式化来自后端的响应。我只是尝试按原样通过它。

我进行了一些调试并尝试将其包装到各种包装器中，因为它们似乎丢失了，但最终它总是会中断，例如：

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)

这就是破坏的阿尔戈利亚代码。

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);

概括

理想的解决方案是不使用这个 InstantSearch 东西，但我不知道如何在服务器端管理多个索引。

还是我对这一切完全错了？任何人都可以建议？

【问题讨论】：

标签： javascript php laravel vue.js algolia

【解决方案1】：

查看这个原生 nuxt 包。 https://algolia.nuxtjs.org/getting-started/usage/

【讨论】：