How to make initialUiState work with stateMapping?

[landermedia]

Is there some rule or what could I probably be missing here?

When I remove stateMapping (at least in my local setup), I could make the initialUiState work. When I say it works, it actually updates the URL with ?query=polar (based on my example below) and the SearchBox component has an initial value of polar.

But as soon as I put back stateMapping, it stops working.

Can you please help shed light on this and what could I probably be missing to make those two work. We're using stateMapping for SEO friendly URLs and we've come to a point where we would like to show initially on load sorted by the most downloaded.

<InstantSearch
  searchClient={client}
  indexName="instant_search"
  initialUiState={{
    instant_search: {
      query: "polar"
    }
  }}
  onStateChange={onStateChange}
  routing={{
    router: history({
      getLocation() {
        if (typeof window === "undefined") {
          return (new URL(url!) as unknown) as Location;
        }

        return window.location;
      }
    })
    stateMapping: {
      stateToRoute(uiState) {
        const indexUiState = uiState["instant_search"] || {};

        return {
          query: indexUiState.query,
          page: indexUiState.page,
          brands: indexUiState.refinementList?.brand,
          category: indexUiState.menu?.categories
        };
      },

      routeToState(routeState) {
        return {
          instant_search: {
            query: routeState.query,
            page: routeState.page,
            menu: {
              categories: routeState.category
            },
            refinementList: {
              brand: routeState.brands
            }
          }
        };
      }
    }
  }}
>
...
</InstantSearch>

PS: I tried to set this up in a codesandbox here but couldn't quite get it to work.

[Haroenv]

Both routing and initialUiState act on the same key of data. We indeed should have some kind of warning or error when they overlap and only one of the two is taken in account.

Can you explain further what your use case of the initial query is that couldn't be derived from the URL?

[landermedia]

I think it's really simple use-case and there's possibly a number of ways to do this such as using React's useEffect hook but thought that since initialUiState is available, it's probably the most efficient thing to use.

We just really want to automatically set to a specific set of query/refinements as soon as after our users visit our app. Example if they go visithttps://example.app, they will then automatically be set to https://example.app?query=polar or https://example.app?query=polar&sort=most_downloaded.

[Haroenv]

Alternatively to the original idea, what you could do is in routeToState, if the routeState is empty object (because you're at home page), interpret that as { myIndex: { query: 'polar', sortBy: 'most_downloaded' }}, like this:

stateMapping: {
  routeToState(routeState) {
  if (Object.keys(routeState).length === 0) return { myIndex: { query: 'polar', sortBy: 'most_downloaded' }}
 // ...

You could also in parseURL of the router add a special key to the routeState on the empty URL and use that for the condition in routeToState

[landermedia]

Thanks for this @Haroenv. I think there's just little problem left. Here's what's happening. Given that the value for default indice sortBy is undefined - the condition Object.keys(routeState).length === 0 is met whenever we try to switch into that. With no other values in uiState this makes it not possible to switch into that.

[Haroenv]

oh yes that's an issue. What you'll need to do instead is in parseURL put the condition (pseudo: parseURL() { if (location.pathName === "/") return { rootURL: true }} and then instead of doing Object.keys, you check the condition on rootURL