User-assigned Search Key and Vue InstantSearch SSR

Disclaimer: We were able to get everything to work (vue-instantsearch, nuxt, ssr). Once we confirmed that things were in working order, we introduced a security use case where our users have restricted access to the data (eg: the use of viewable_by according to the docs) by granting them user-assigned search key.

Because of the use of Nuxt SSR, it requires the use of rootMixin when using the ais-instant-search-ssr tag.

The rootMixin is created OUTSIDE of the export default block.

// snipped for brevity 
const searchClient = algoliasearch(APP_NAME, SEARCH_KEY)
const { rootMixin } = createSearchIndex({ searchCient, IndexName })
export default {
  // ...
  mixins: [rootMixin], 
  // ...
}

We have a race condition issue because we need to FIRST dynamically create the user-assigned search key when they visit the page BEFORE the searchClient is called. We are using GraphQL which would do an async call to get the user-assigned search key and the async is problematic in our use case because we need the search key before everything else is called/initalized.

I hope I am making sense here? (fingers-crossed).

Any tips or insight on how we can “synchronically” have the searchClient/createInstantSearch inside the export default so we can control the lifecycle and flow of things?

Thanks in advance.

If I understand it correctly, you want to create a search client with a secured api key, but aren’t sure how to combine both approaches. We created a demo that does both here for you:

LINK: https://codesandbox.io/s/ssr-lxfqq

Hope that helps you!