AlgoliaのReact Instantsearch Hooksを使って、任意のタイミングで検索を実行する

Instantsearch Hookには、その名の通りReact Hookが用意されています。

import { useInstantSearch } from 'react-instantsearch-hooks-web'

useInstantSearch()

このHookの戻り値を使うことで、検索フォームへの情報入力以外の、任意のタイミングで検索を実行できます。

UIStateを更新する

<Hits>や<SearchBox>要素の中身も更新させたい場合、useInstantSearchで取得できるsetUiState関数を利用します。

const { setUiState } = useInstantSearch()
const searchCustom = (word: string) => {
  setUiState({
    'YOUR_ALGOLIA_IDNEX_NAME': {
      query: word
    }
  })
}

インデックス名が必要なことに注意しましょう。

現在の検索設定を維持する場合、uiStateも利用する

上のサンプルでは、<RefinementList>などで追加した設定が消えてしまいます。

現在の設定を活かしたい場合は、uiStateオブジェクトを取得して中身を書き換える形にしましょう。

const indexName = 'YOUR_ALGOLIA_IDNEX_NAME'
const { uiState, setUiState } = useInstantSearch()

const searchCustom = (word: string) => {
  setUiState({
    ...uiState,
    [indexName]: {
      ...uiState[indexName],
      query: word,
    },
  })
}