Algoliaで空白と初期の検索を防ぐ



Algoliaは、最近彼らのpricingを更新しました.あなたはもはや検索を得るために莫大な毎月の手数料を支払う必要はありません.それは完全にあなたの検索ボリュームに基づいており、毎月無料で10000の検索要求を取得します.これは、このようなブログのために非常に魅力的になります.
私は、24579152に十分なほど簡単だった検索を得るために続きますが、私は問題に出くわしました.Algoliaは、デフォルトでは、すべての1つのページの負荷と別のときに検索バーをフォーカスする検索要求を行います.これのための推論は、空白の要求を発火させることが次の要求を速くするということです.しかし、要求の数を制限しようとしている人々のために、これは問題です.人気のあるブログの場合は、誰もあなたの検索を使用していない場合でも、非常に簡単に10 Kの制限を打つだろう.
official Gatsby guideを使用して最初または空白の検索をスキップする公式の方法はありません.おそらく、公式クライアントを使用している場合は、このコードのようなものがあります.
  const algoliaClient = algoliasearch(
    "ID",
    "KEY"
  );

  return (
    <div ref={rootRef}>
      <InstantSearch
        searchClient={algoliaClient}
        indexName={indices[0].name}
        onSearchStateChange={({ query }) => setQuery(query)}
      >
        <SearchBox onFocus={() => setFocus(true)} hasFocus={hasFocus} />
        <SearchResult
          show={query && query.length > 0 && hasFocus}
          indices={indices}
        />
      </InstantSearch>
    </div>
  );
問題を解決するには、独自の検索クライアントとフックを検索メソッドに作成します.
  const algoliaClient = algoliasearch(
    "ID",
    "KEY"
  );

  const searchClient = {
    search(requests) {
      if (requests[0].params.query === "") {
        return [];
      }
      return algoliaClient.search(requests);
    },
  };

  return (
    <div ref={rootRef}>
      <InstantSearch
        searchClient={searchClient}
        indexName={indices[0].name}
        onSearchStateChange={({ query }) => setQuery(query)}
      >
        <SearchBox onFocus={() => setFocus(true)} hasFocus={hasFocus} />
        <SearchResult
          show={query && query.length > 0 && hasFocus}
          indices={indices}
        />
      </InstantSearch>
    </div>
  );
そこに行く!これ以上の検索は、最初のページの負荷とこれ以上の空白の検索で解雇されます.