Algolia Instantsearch Hooksを使った場合の、URLに追加されるクエリ文字列をカスタマイズする
AlgoliaのReact Instantsearch Hooksを使った場合、検索フォームに入力したキーワードなどがURLにクエリ文字列として追加されます。 例: https://example.com?example […]
広告ここから
広告ここまで
目次
AlgoliaのReact Instantsearch Hooksを使った場合、検索フォームに入力したキーワードなどがURLにクエリ文字列として追加されます。
例: https://example.com?example_index_name[query]=searchWord
この文字列を変更する方法の覚書です。
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とシンプルになります。