How to use initialUiState and a custom router at the same time ?

[tristanbes]

Hello,

I'm looking for an explanation on how to use initialUiState with a custom router;
I'm trying to set default values for the country filter, based on the country the user lives in and make it work with the custom router;

We've tried witout success:

      routeToState(routeState) {
        return {
          [indexName]: {
            refinementList: {
              country: routeState[translatedParams.country] || (initialUiState[indexName] && initialUiState[indexName].refinementList!['country']),
          },
        };

[Kocal]

Hey, I'm working with @tristanbes and I'm the one which faced the problem. I think I should have open an issue myself instead of asking him to do it, on something he didn't work on 😅

We are using vue-instantsearch but I'm 100% the issue comes from instantsearch.js and not the Vue wrapper.

So, we want to use initialUiState to prefill a country field based on the user contry (eg: if he lives in France, we want to fill this field with his country and neigbours France and Belgique).

We are able to give initialUiState prop to the AisInstantSearch component, which is used in the new instantsearch instance.

However, when I'm looking at the devtools, I can see that the _initialUiState property does not contain our country array, instead it's undefined:

We use a custom router with a custom state mapping, so I thought the issue could come from it.

And bingo, I've made a test by updating routeToState method to return France (FR in fact, we use 2-chars code instead of full-name country) when routeState[translatedParams.country] is undefined:

The country France is now pre-selected at page boot, but the URL is altered and we don't want this (@tristanbes if you can confirm 🙏) :

I don't think we can't prevent the URL to be altered since we did our logic inside our custom router, so the question is how to use the initialUiState props without altering our router? Is that possible?

PR/issue related:

• feat: introduce initialUiState option #4074
• fix(InstantSearch): fix initialUIState when refinements are already present in the route #4103, I thought it could be fixed by https://github.com/algolia/instantsearch.js/pull/4103/files#diff-1fc36c4ea042d2ecb5a498416e5e0357R230 but it looks like it has been reverted (or not merged yet? base branch is next) but we are using the latest version (4.7.0 with TypeScript support)

Thank you!

[Haroenv]

This is actually something which I suggested in #4395 (but not the whole team agreed that this is the right heuristic). If you think that this might be fixing your use case specifically, we might merge that.

It might still be needed to merge deeper within the UiState, to e.g. merge separate values for refinement list, maybe per attribute?

For now we consider that uiState is atomic per index, and doesn't get merged inside the index. This means that state from a router on a specific index will override the initial UI state. This means that the PR you found indeed works, and never was reverted, except that it doesn't merge deeply.

Could you explain what exactly your use case is for ui state which conflicts with router? Our previous position was that you use initialUiState for things which you can use routing for too, therefore the routing should take priority, but we might have missed a use case.

Thanks for raising this in any case, we always love when you come with a very detailed issue!

[tristanbes]

The use case:

1- The user visit the search engine; He lives in France (url: /search/)
2- The filter "country" is pre-filled with "France" and "Belgium"; The URL is still untouched (url: /search/)

3- The user sends the link to his American friend (/search/)
4- The user B visit the link and the country is prefilled with America
5- The user B changes the country filter manually, adding Canada to the list, the URL changes (/search/country=US,CA)

So we have a notion of pre-fill filter value;

[Haroenv]

That makes sense, this means the merge needs to happen even deeper than what my draft PR does. I wonder if we maybe need an API to allow users to merge themselves?

[Haroenv]

In the mean time, I think it would be quite interesting for you to fork the routing middleware and implement your own (instead of using routing: xxx, it's very similar) which merges how you expect