Algolia Instantsearch Hooksを使った場合の、URLに追加されるクエリ文字列をカスタマイズする

AlgoliaのReact Instantsearch Hooksを使った場合、検索フォームに入力したキーワードなどがURLにクエリ文字列として追加されます。例: https://example.com?example […]

広告ここから

広告ここまで

`InstantSearch`の`routing.stateMapping`でカスタマイズする

<InstantSearch>コンポーネントには、routingプロパティを追加できます。

ここで検索のStateとURLのクエリ文字列のマッピングを調整します。


  const indexName = process.env.NEXT_PUBLIC_ALGOLIA_INDEX_NAME as string
  return (
      <InstantSearch
        searchClient={searchClient}
        indexName={indexName}
        routing={{
          router: history(),
          stateMapping: {
            stateToRoute: (uiState) => {
              const indexUiState = uiState[indexName]
              return indexUiState
            },
            routeToState: (routeState) => {
              return {
                [indexName]: routeState
              }
            },
          },
        }}
      >

stateToRouteでは、uiStateから検索インデックス名を除去しています。

routeToStateにて除去したインデックス名を追加してやることで、整合性を保ちます。

この設定を行うと、URLがhttps://example.com?query=searchWordとシンプルになります。