Algolia Instantsearchで、検索結果クリック時にキーワードをリセットする

Algolia Instantsearchをヘッダーなどレイアウト部分に配置している場合、「リンクをクリックしてページ遷移した後は、検索結果を表示しない」動作を実装したくなります。

connectSearchBoxとHitsを組み合わせる

検索フォームのキーワードをリセットするには、connectSearchBoxをHitsまたはconnectHitsと組み合わせて使用します。

import { 
    connectSearchBox, Hits
} from 'react-instantsearch-dom';

export const AlgoliaSearchResult = connectSearchBox(({refine, currentRefinement}) => {
  const [isShow, shouldShow] = useState(false)

  useEffect(() => {
    shouldShow(!!currentRefinement)
  }, [currentRefinement, shouldShow])

  const handleResetSearchWords = useCallback(() => {
    refine('')
  }, [refine])
  if (!isShow) return null;

  return (
      <Hits hitComponent={({hit}) => (
        <Link href={slug}>
           <span onClick={() => handleResetSearchWords()}>{hit.title}</span>
        </Link>
     )) />
 )
}

currentRefinementの値をuseEffectで監視し、キーワードが入力されていない場合は結果を表示させません。

また、Linkをクリックした場合のクリックイベントを使い、refine('')でキーワードをリセットしています。これはReact RouterやNextあたりのRouterイベントを使ってもよいかもしれません。