Question re custom routing with statemapping

[landermedia]

So I'm working with routing and basically followed based from the discussion here. I'm happy with the initial results but there are two things that made me explore the old solution I've tried before which is described here.

In my local setup, I was able to make the URLs update based on say updating query but in this codesandbox that I created, I'm seeing different results. Maybe that's because I'm using the components before react-instantsearch-hooks-web were created.

The primary reason why I needed to go such length is that I need to do customization on the URL such as make it SEO friendly and/or add some unique id's to indicate UI specifics such as what media is loaded when the app loads from a given URL.

What could I be missing here? Here are my observations so far below:

1. initialUiState doesn't seem to work. In the sandbox, I've passed in a query but it doesn't seem to reflect anything.
2. stateMapping > stateToRoute doesn't update the URL
3. stateMapping > routeToState gets query variable set but it gets lost in a couple of rerenders (idk).

I appreciate any thoughts here. Thank you!

[Haroenv]

There's a couple very small confusions that happened to make your example not working:

1. the UiState type from react-instantsearch-core isn't compatible with the type of InstantSearch.js or React InstantSearch hooks, it's a completely different shape
2. initialUiState is not compatible with routing. It's only used if there are no routing parameters
3. because of the type being slightly wrong, you didn't get notified ui state is actually nested per index

A working example is https://codesandbox.io/s/upbeat-diffie-126rrb?file=/App.tsx

Note that there's a small thing I noticed is that while the InstantSearch type is generic to allow a different route state than ui state, it wasn't yet allowed in React InstantSearch hooks yet. I've opened algolia/react-instantsearch#3466 to address that

[landermedia]

Thank you @Haroenv. I created this sandbox. I'm not sure if I have right expectations but I can't seem to find customVal in uiState.

[Haroenv]

Sorry that that was not clear, but ui state is controlled by a widget, as in this guide https://www.algolia.com/doc/guides/building-search-ui/widgets/create-your-own-widgets/react/#lifecycle-and-api

See https://codesandbox.io/s/lucid-jang-e6ghrx?file=/CustomWidget.tsx for a starter, depending on what you actually want to achieve

[landermedia]

@Haroenv. Thank you! I guess I have I only have one last question.

The reason why I'm doing this because in my Next.js app, /?login=true launches the login modal on browser load, however, those extra parameters in the URL that aren't in the uiState gets removed as soon as Algolia's routing takes place, so basically my Login modal never shows up.

The solutions I've tried are below:

1. Creating this custom widget as per your suggestion solves it! But to do this for every component that writes to the URL with router.push makes it difficult to manage, I suppose.
2. I think I prefer using the history router to parse the location in createURL and construct those query params back in the returned URL. Plus the benefit of pretty URLs

Thoughts?

[Haroenv]

I misunderstood your question, I thought it was a parameter that changes based on the ui. If it's parameter that's unrelated, you can indeed use createURL! Just be careful that if you have a refinement that's no longer relevant that it does get removed from the URL (if you have that use case)

[landermedia]

Well, I apologize as well @Haroenv but you're actually right. The last question I have is kinda of a bit scenario, yes! Thanks also for the tip as well re the refinement.