この記事は、「Algolia Advent Calendar 2020」の投稿です。

AlgoliaのInstantsearch、便利ですよね。ただ、デフォルトのままだと、ページ表示時に一度検索を実行してしまいますので、できるだけUnitを消費したくない人・案件にはすこし悩ましいところがあります。

が、ちょっと設定するだけでページ表示時の初回検索を停止させることができます。

Reactの場合

ReactでInstantsearchを使うと、大体こんな感じの書き方になります。

import {  InstantSearch } from 'react-instantsearch-dom';
import algoliasearch from 'algoliasearch/lite';

const searchClient = algoliasearch(
    'AppId',
    'SearchOnlyApiKey'
  );

export default ({children}) => (
    <InstantSearch indexName="IndexName" searchClient={searchClient}>
      {children}
    </InstantSearch>
);

初回の検索を止める場合は、これがこうなります。

import {  InstantSearch } from 'react-instantsearch-dom';
import algoliasearch from 'algoliasearch/lite';

const algoliaClient = algoliasearch(
    'AppId',
    'SearchOnlyApiKey'
  );
export const searchClient = {
    search(requests) {
        if (requests.every(({ params }) => !params.query)) {
          return Promise.resolve({
            results: requests.map(() => ({
              hits: [],
              nbHits: 0,
              nbPages: 0,
              page: 0,
              processingTimeMS: 0,
            })),
          });
        }
        return algoliaClient.search(requests)
    }
}
export default ({children}) => (
    <InstantSearch indexName="IndexName" searchClient={searchClient}>
      {children}
    </InstantSearch>
);

どういう動きをしているか

algoliasearchのsearchメソッドを使って検索を実行する様子です。そしてこのメソッドは初回のレンダリング時にも実行され、検索クエリが何も指定されていない状態での検索結果が返ってきます。

ということは、「検索クエリが何もない状態の時は検索を実行しない」ようにすればOKです。ということで、上のコードでは、ダミーのPromiseを返してやるように上書きしています。

（おそらく）クエリの上書きも可能・・・？

searchメソッドをモックして別の挙動を書くという形をとっていますので、理論上クエリの内容を書き換えて検索するように強制することなども可能そうです。

ただし、意図した検索結果にならないとそれはそれでUXを下げることになりますので、匙加減にはご注意ください。

参考

• https://www.algolia.com/doc/guides/building-search-ui/going-further/conditional-requests/react/#mocking-a-search-request