are some type definitions within the default `history()` router and `stateMapping` incorrect?

[ian moersen]

🐛 Current behavior

I notice that the functions I pass to the default history() router and stateMapping object seem to require different types than they actually use. specifically, for one example, the createURL() function, instantiated like this:

import { InstantSearch } from 'react-instantsearch';
import { history } from 'instantsearch.js/es/lib/routers';

// ..
<InstantSearch
  indexName="search"
  searchClient={/* .. */}
  routing={{
    router: history({
      createURL({ qsModule, routeState, location }) {
        // `routeState` here thinks it's of type "UiState"..
        // UIState is:
        // [indexName] : { query, ... }

        // ..but that's not what it is:
        console.log(routeState);
        // { query: 'foo', ... }

        // ^ there's no [indexName] key! it seems to actually just be "IndexUiState"
      }
    })
  }}
/>

it seems these functions (createURL, parseURL, stateToRoute, routeToState, etc) all expect the routeState or uiState parameters to be of type UiState, but I think I'm seeing those parameters actually being of type IndexUiState.

is it possible there's a mistake in the type definition files?

🔍 Steps to reproduce

I created a vanilla react-typescript sandbox and copied over the default "routing-seo-friendly" example from the documentation:

https://codesandbox.io/s/stupefied-panna-rk3cpp?file=/src/search-routing.ts

this looks to me like (in the search-results.ts file) there is clearly a problem with the uiState type definitions.

Live reproduction

https://codesandbox.io/s/stupefied-panna-rk3cpp?file=/src/search-routing.ts

💭 Expected behavior

...I'd expect the type defs to line up with what's actually being provided from those methods, I suppose

Package version

latest instantsearch.js

Operating system

No response

Browser

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[Haroen Viaene]

I believe this is not totally clear, but the default value of TRouteState is UiState, so to correctly do the typing, you need something like this:

type RouteState = {
  query?: string
 ...
}; // or IndexUiState if you use a straight mapping

<InstantSearch<UiState, RouteState>
  indexName="search"
  searchClient={/* .. */}
  routing={{
    router: history({
      createURL({ qsModule, routeState, location }) {
        // `routeState` here thinks it's of type "UiState"..
        // UIState is:
        // [indexName] : { query, ... }

        // ..but that's not what it is:
        console.log(routeState);
        // { query: 'foo', ... }

        // ^ there's no [indexName] key! it seems to actually just be "IndexUiState"
      }
    })
  }}
/>

There's definitely improvements possible in this type, but we haven't found the most ergonomic way to infer these types yet

[ian moersen]

got it, thanks! I understand how the """fix"" could be quite complex so I'll close this issue since there's a simple workaround 👍