Multiple Independent Instances on same page

[JohnMica]

Was wondering if

• i build a library (web-component) with Vue
• i embed multiple instances of this web-component on a webpage
• each instance would have a different index
• each instance is standalone (internal Router, State Management, Algolia, etc ...)

Not sure this scenario is possible to implement ?

Currently I managed to get something going but

• on 1st page load only 1 instance calls the Algolia API
• on 2nd page load all instances call the Algolia API

[Haroenv]

This sounds like something else in the integration has gone wrong, do you have a reproduction?

[JohnMica]

unfortunately no reproduction yet where you can inspect the integration however, I can sort of give you the logical steps ?

• have a 'factory' to instantiate each library with all of its internal logic
• using logic in the router beforeEach to see if we already have the Algolia instance and if not instantiate it with the correct details
• redirect the URL to a specific 'home page' if needed
• the library has logic that controls the actual URL (or only the internal routing, depending how its embedded)
• Alogia is instantiated with routing and cache

[Haroenv]

looks like you're talking about InstantSearch, not the js client (the repository you're in), but yes of course you can only have one routing active per page. You'll need to create a reproduction so we can see what's going on and you can contact support for more help

[JohnMica]

oops my bad its actually for both InstantSearch and Vue wrapper

my questionsa would be

1 - would Algolia do some request cache to prevent 'same app' requests in a very short period of time
2 - woudl Aloglia client sets some window variables at all ? (not the storage /session as those ones i have managed to actually set uniquely per each embedded app

[Haroenv]

1. if you use the same client, it's cached for identical network requests yes
2. no, it sets no window variables

[JohnMica]

thanks for the reply and the information

[JohnMica]

so after more tinkering i did manage to sort this out

will leave this here in case it will help someone else in the future

• pseudo code

the solution was simply how i was using the Pinia Store for each instance and the Router

• initially i had something like

// router/index.ts

import {useStore} from '@stores/somestore'

router,beforeEach( ()=>{

call the setting APIs
useStore().someAction (to store some settings)

....
}

// page.vue

....
const indexName = computed(()=>useStore().algoliasettings.indexName

watch(indexName,(val) =>{
  if (val) {
    searchClient = algoliasearch()
  }
})

this errored out as the indexName was undefined always since it was relying on the actual searchClient
kind of a loop with undefined
only 1 instance would be defined at any given time (random out of X number of potential instances

• now the fix is a bit simple (wish i could see it before)

// router/index.ts

import {useStore} from '@stores/somestore'

router,beforeEach( ()=>{

const store = useStore()
call the setting APIs
store.someAction (to store some settings)
store.someOtherAction (to store the actual index from the settings)

....
}

// page.vue


import {  watchDebounced } from '@vueuse/core';

....
const indexName = computed(()=>useStore().indexName

watchDebounced(indexName,(val) =>{
  if (val) {
    searchClient = algoliasearch()
  }
},
  { debounce: 500, maxWait: 1000, immediate: true }
)