Bug with initialUiState.

Bug 🐞

What is the current behavior?

<ais-instant-search-ssr
					:initial-ui-state="initialUiState"
					> 

ais-instant-search-ssr does not support :initial-ui-state feature. I need this on server side since I want to preconfigure my search based on something from my headless cms. And I can’t do this in my setup.

I’m using Nuxt Algolia implemented like in your docs:

data() {
		const mixin = createServerRootMixin({
			searchClient: getSearchClient(this.$config ?? process.env),
			indexName: this.$config?.ALGOLIA_INDEX_NAME ?? process.env.ALGOLIA_INDEX_NAME!,
			routing: {
				router: nuxtRouter(this.$router),
			},
			initialUiState: {
				[this.$config?.ALGOLIA_INDEX_NAME]: {
					refinementList: {
						business: ["koed"] <--- THIS IS HERE I WANT TO USE MY CMS DATA PROPERTY
					}
				},
			}
		});
		return {
			...mixin.data(),
		};
	},
	provide() {
		return {
			// Provide the InstantSearch instance for SSR
			$_ais_ssrInstantSearchInstance: this.instantsearch,
		};
	},
	serverPrefetch() {
		return this.instantsearch?.findResultsState(this).then((algoliaState: any) => {
			this.$ssrContext.nuxt.algoliaState = algoliaState;
		});
	},
	beforeMount() {
		const results =
			(this.$nuxt.context && this.$nuxt.context.nuxtState.algoliaState) ||
			(window as unknown as IAlgoliaWindow).__NUXT__.algoliaState;

		(this as any).instantsearch.hydrate(results);

		// Remove the SSR state so it can't be applied again by mistake
		delete this.$nuxt.context.nuxtState.algoliaState;
		delete (window as unknown as IAlgoliaWindow).__NUXT__.algoliaState;
	},

I can’t use my properties in data() from headless cms so I need some way to set this initialUiState when my cms data is available-

What is the expected behavior?

The expected behavior is I can set my initialUiState programatically. something like this:

data() {
		const cmsProp = this.data.property;
		
		const mixin = createServerRootMixin({
			searchClient: getSearchClient(this.$config ?? process.env),
			indexName: this.$config?.ALGOLIA_INDEX_NAME ?? process.env.ALGOLIA_INDEX_NAME!,
			routing: {
				router: nuxtRouter(this.$router),
			},
			initialUiState: {
				[this.$config?.ALGOLIA_INDEX_NAME]: {
					refinementList: {
						business: [cmsProp ] <--- USED HERE.
					}
				},
			}
		});
		return {
			...mixin.data(),
		};
	},
	

What is the version you are using?

“algoliasearch”: “^4.9.3”, “vue-instantsearch”: “^3.7.0”,

[Haroenv]

something approximately like this: https://codesandbox.io/s/awesome-architecture-shex2?file=/src/App.vue

[Haroenv]

If you use routing, you can’t also use initial UI state, they both act on the same information and routing takes precedence. What you should do is:

1. add a new property “initial state” or something to the router you created
2. pass the cms state to the router
3. merge with the router from the url

Hope that makes sense!