Typescript errors on stateToRoute and routeToState in stateMapping (InstantSearch Hooks routing)

[tom-radikal]

Hi,

I'm using Algolia in combination with Contentful and Next.js. One of the pages I'm developing is an archive page with a SearchBox and several RefinementLists. Since Algolia indexes the Contentful fields with its full name (for example fields.technology.en-US), using the default routing={true} made the search query in the URL a bit too long.

Following the docs, I was using stateToRoute and routeToState to transform the necessary fields. Everything works as expected, but unfortunately only when I specifically add a ts-ignore comment above both these methods.

This is my InstantSearch component:

<InstantSearch
  searchClient={searchClient}
  indexName={indexName}
  routing={{
    router: createInstantSearchRouterNext({
      singletonRouter,
    }),
    stateMapping: {
      stateToRoute(uiState) {
        const indexUiState = uiState[indexName]

        return {
          q: indexUiState.query,
          timing: indexUiState.refinementList?.timing,
          theme: indexUiState.refinementList?.['fields.theme.en-US'],
          type: indexUiState.refinementList?.['fields.type.en-US'],
          technology:
            indexUiState.refinementList?.['fields.technology.en-US'],
          sortBy: indexUiState.sortBy?.split(`${indexName}_`)[1],
          page: indexUiState.page,
        }
      },

      routeToState(routeState) {
        return {
          [indexName]: {
            query: routeState.q,
            refinementList: {
              timing: routeState.timing,
              'fields.theme.en-US': routeState.theme,
              'fields.type.en-US': routeState.type,
              'fields.technology.en-US': routeState.technology,
            },
            page: routeState.page,
            ...(routeState.sortBy
              ? { sortBy: `${indexName}_${routeState.sortBy}` }
              : {}),
          },
        }
      },
    },
  }}
>

And these are the Typescript errors I'm getting:

Type '(uiState: UiState) => { q: string | undefined; timing: string[] | undefined; theme: string[] | undefined; type: string[] | undefined; technology: string[] | undefined; sortBy: string | undefined; page: number | undefined; }' is not assignable to type '(uiState: UiState) => UiState'.
  Type '{ q: string | undefined; timing: string[] | undefined; theme: string[] | undefined; type: string[] | undefined; technology: string[] | undefined; sortBy: string | undefined; page: number | undefined; }' is not assignable to type 'UiState'.
    Property 'q' is incompatible with index signature.
      Type 'string | undefined' is not assignable to type 'Partial<{ query: string; } & { configure: PlainSearchParameters; } & { geoSearch: { boundingBox: string; }; } & { hierarchicalMenu: { [rootAttribute: string]: string[]; }; } & ... 13 more ... & { ...; }>'.
        Type 'undefined' is not assignable to type 'Partial<{ query: string; } & { configure: PlainSearchParameters; } & { geoSearch: { boundingBox: string; }; } & { hierarchicalMenu: { [rootAttribute: string]: string[]; }; } & ... 13 more ... & { ...; }>'.

Type '(routeState: UiState) => { [x: string]: { sortBy?: string | undefined; query: Partial<{ query: string; } & { configure: PlainSearchParameters; } & { geoSearch: { boundingBox: string; }; } & ... 14 more ... & { ...; }>; refinementList: { ...; }; page: Partial<...>; }; }' is not assignable to type '(routeState: UiState) => UiState'.
  Type '{ [x: string]: { sortBy?: string | undefined; query: Partial<{ query: string; } & { configure: algoliasearchHelper.PlainSearchParameters; } & { geoSearch: { boundingBox: string; }; } & ... 14 more ... & { ...; }>; refinementList: { ...; }; page: Partial<...>; }; }' is not assignable to type 'UiState'.
    'string' index signatures are incompatible.
      Type '{ sortBy?: string | undefined; query: Partial<{ query: string; } & { configure: algoliasearchHelper.PlainSearchParameters; } & { geoSearch: { boundingBox: string; }; } & { ...; } & ... 13 more ... & { ...; }>; refinementList: { ...; }; page: Partial<...>; }' is not assignable to type 'Partial<{ query: string; } & { configure: PlainSearchParameters; } & { geoSearch: { boundingBox: string; }; } & { hierarchicalMenu: { [rootAttribute: string]: string[]; }; } & ... 13 more ... & { ...; }>'.
        Types of property 'query' are incompatible.
          Type 'Partial<{ query: string; } & { configure: PlainSearchParameters; } & { geoSearch: { boundingBox: string; }; } & { hierarchicalMenu: { [rootAttribute: string]: string[]; }; } & ... 13 more ... & { ...; }>' is not assignable to type 'string'.

I must be doing something wrong obviously, but I can't seem to figure out what.

[Haroenv]

This probably could be documented more clearly indeed, but the RouteState defaults to UiState, so if you transform it, you should pass the generic to InstantSearch like this:

import type { SearchClient, UiState } from 'instantsearch.js';
import React from 'react';
import { InstantSearch } from 'react-instantsearch-hooks';
import { createInstantSearchRouterNext } from 'react-instantsearch-hooks-router-nextjs';
import singletonRouter from 'next/router';

type RouteState = {
  q?: string;
  timing?: string[];
  theme?: string[];
  type?: string[];
  technology?: string[];
  sortBy?: string;
  page?: number;
};

export function App({
  indexName,
  searchClient,
}: {
  indexName: string;
  searchClient: SearchClient;
}) {
  return (
    <InstantSearch<UiState, RouteState>
      searchClient={searchClient}
      indexName={indexName}
      routing={{
        router: createInstantSearchRouterNext({
          singletonRouter,
        }),
        stateMapping: {
          stateToRoute(uiState) {
            const indexUiState = uiState[indexName];

            return {
              q: indexUiState.query,
              timing: indexUiState.refinementList?.timing,
              theme: indexUiState.refinementList?.['fields.theme.en-US'],
              type: indexUiState.refinementList?.['fields.type.en-US'],
              technology:
                indexUiState.refinementList?.['fields.technology.en-US'],
              sortBy: indexUiState.sortBy?.split(`${indexName}_`)[1],
              page: indexUiState.page,
            };
          },

          routeToState(routeState) {
            return {
              [indexName]: {
                query: routeState.q,
                refinementList: {
                  timing: routeState.timing,
                  'fields.theme.en-US': routeState.theme,
                  'fields.type.en-US': routeState.type,
                  'fields.technology.en-US': routeState.technology,
                },
                page: routeState.page,
                ...(routeState.sortBy
                  ? { sortBy: `${indexName}_${routeState.sortBy}` }
                  : {}),
              },
            };
          },
        },
      }}
    ></InstantSearch>
  );
}

[Haroenv]

could you add a debugger on the point that warning is given? if the warning is correct, it's because widgets is empty

[tom-radikal]

Widgets is undefined, and at that moment nothing is on screen indeed:

There is this, though:

[Haroenv]

I don't think we'll be able to help if you can't reproduce this in a minimal sandbox though, all I can think of is conditionals you don't see (suspense maybe?)

[tom-radikal]

Does that include outside of the InstantSearch component? I have tried, even copying a bunch of the codebase on codesandbox (https://codesandbox.io/s/staging-shadow-vw8rh6?file=/components/projects/ProjectsArchive.tsx), but I can't reproduce it there.

On my project, when I click a link with the parameters, they also get removed.

The only way I managed to get it working was to wrap my app in the InstantSearch component, but that's not possible since I have 3 Archive pages that all need to work in the same way. If there was a way to add the routing to the component instead of the one :(.

Edit: something else that happens on my project, but not on codesandbox: when navigating away from the page, it does 7 requests to Algolia, each with a facet or query less than the previous.

[tom-radikal]

Here is one way I managed to reproduce my error. I'm getting it in all browsers with the complete project, but this might help you to pinpoint the issue:

1. Open a new instance of Firefox, with a clear cache
2. Open a new incognito window
3. Go to the page: https://codesandbox.io/s/staging-shadow-vw8rh6?file=/components/projects/ProjectsArchive.tsx
4. Click the link that's visible. It should link to the archive with the query params, and they are removed.
5. In the console you should see the warning that I was getting