Algoliasearch in nuxt js problem server down

hello, i have a problem when reload the page or f5
using algoiasearch in nuxt.js
thanks for help
console and down the serve node

    if (err) throw err;
             ^

AlgoliaSearchError: Objects must contain a valid ‘objectID’ (near 1:49)
at success (C:\Users\Windows 8.1\Desktop\nuxttest\node_modules\algoliasearch\src\AlgoliaSearchCore.js:377:32)
at processTicksAndRejections (internal/process/task_queues.js:93:5) {
name: ‘AlgoliaSearchError’,
message: “Objects must contain a valid ‘objectID’ (near 1:49)”,
debugData: [
{
currentHost: ‘https://picuzn9mbq-dsn.algolia.net’,
headers: [Object],
content: ‘{“requests”:[{“indexName”:“perfiles”,“objectID”:"",“attributesToRetrieve”:“displayName,email,avatar,phoneNumber,activity,providerId”}]}’,
contentLength: 135,
method: ‘POST’,
timeouts: [Object],
url: '/1/indexes//objects’,
startTime: 2020-01-30T19:34:13.810Z,
endTime: 2020-01-30T19:34:14.671Z,
duration: 861,
statusCode: 400
}
],
statusCode: 400
/
*****/
code component

<navBar />

<div class="sub-container">

<navBarLeft />
<div class="container-search"> 

<client-only>

   <ais-instant-search index-name="perfiles"  

      :search-client="searchClient"  

      :stalled-search-delay="1000">



    <ais-search-box placeholder="buscar por nombre, id, actividad"/>

      

  <ais-stats>

    <p slot-scope="{ hitsPerPage, nbPages, nbHits, page, processingTimeMS }">

      Pagina {{ page + 1 }} de {{ nbPages }} <br> 

      {{ nbHits }} resultados en {{ processingTimeMS }} milesegundos

    </p>

  </ais-stats>

    <div class="right-panel">



       <div class="box-result-title col-4">

          <h2>  nombre </h2>

          <h2>  id perfil </h2>

          <h2>  actividad </h2>

          <h2>  editar </h2>

        </div>

      <ais-hits>

        <div slot="item" slot-scope="{ item }" class="box-result col-4">

         <span> <img :src="item.avatar " alt=""> {{ item.displayName }}</span>

         <span>  <n-link :to="`/user/${item.objectID}`" target="_blanck"> {{item.objectID}} </n-link>  </span>

         <span> {{ item.activity }}  </span>

         <span v-if="ACTION == 'admin' "> <button class="li-btn" @click="callModalEdit(item.objectID,  item.displayName)"> editar </button> </span>

         <span v-else> <button class="li-btn" > sin permisos </button> </span>

        </div>

      </ais-hits>

      <ais-pagination 

          page-change="onPageChange"

          :show-first="true"

          :show-previous="true"

          :show-next="true"

          :show-last="true"

          :padding="8"

          :total-pages="10"

          class-names="object"

            />

      </div>

    </ais-instant-search>

</client-only>

</div>
</div>

</div>

Hi @ezequielchat,

Would it be possible to create a codesandbox for us to help troubleshoot this issue?

We have a starter templates here for instantsearch.

Let us know when you have that ready!

hi @cindy.cullen i,
I forgot , i have screenshot

Hi @ezequielchat,

Thanks for the screenshot but a codesandbox would be more helpful in troubleshooting the issue. Would it be possible to create one?

Hello again,
here the code, …

you need a key secret?

ok, tankh for your help

Hi there,
We do not need “key secret”, but
we need “appId” and “search-only api key”.

You can just update your about.vue to include that values and let us know.
Is there any step to reproduce your issue?

Or does it just happen once I visit /about page?

good morning, update the codesandbox,
the problem is only when you reload the page, or f5

const searchClient = algoliasearch(

‘PICUZN9MBQ’, ‘cf1050b08366c9ee9996a6111e309c75’

);

The error could be from multiple things, but one that I had was that InstantSearch wasn’t transpiled, so in nuxt.config.js:

module.exports = {
  build: {
    transpile: ['vue-instantsearch', 'instantsearch.js/es'],
  }
}

Then more errors came, since you are using the non-server side rendering version of Vue InstantSearch in a server-rendered context. There’s two options to fix it:

  • explicitly wrap the ais-instant-search in a <no-ssr> tag (comes default with Nuxt)
  • implement server side rendering prefetching with Algolia. That’s what I have done in this sandbox:

ok, thanks for your time, ,
I will test your code in another project. in another component I also used vue-instantsearch, but with a conditioner, I first selected an option and then searched, did not render the first time, so it did not fail,