Vue-instantsearch and Quasar SSR

Open Q&A
, ,
1

I’m having trouble adapting samples from the documentation (Server-side rendering with Vue InstantSearch | Algolia) to my Quasar SSR application.

Despite the fact that documentation contains numerous examples, I was unable to adapt any of them to Quasar when using SSR.

When I use an SPA, everything works OK, but to construct an SSR version, I need to pre-render the data in the preFetch hook, which I don’t know how to do. The main area where I need assistance is with the parameters I should pass to the “instantsearch.findResultsState” in the IndexPage.vue’s preFetch method.

// IndexPage.vue

import { renderToString } from '@vue/server-renderer';
export default {

  preFetch ({ssrContext}) {

    const instantsearch  = ssrContext.srmixin.data()['instantsearch']
    //
    // TODO: What should I pass as params to findResultsState?
    // 
    // const element = null;  // what should element be ?
    // const renderToString = renderToString; // Is this correct ?
    // 
    // instantsearch.findResultsState({ element, renderToString }).then((state) => {
    //   ssrContext.ALGOLIA_STATE = state;
    // }); 
    // 
    //
  }
}

To demonstrate my issue, I create this repository, which is also running in this sandbox: CodeSandbox - CodeSandbox

The relevante files are boot/search.js and the pages/Index.vue

Can someone help me with this?

thanks!