Vue InstantSearchのRefinement ListでUncaught (in promise) Error

カテゴリのファセットのところでエラー

Vue InstantSearchのWidget(ais-refinement-list)を導入してイイ感じに動いてるかな？と思いきや、コンソールをみたら、以下のようなエラーが出ていました。categoriesとtagsの両方とも。

Uncaught (in promise) Error: tags is not a retrieved facet.
    at SearchResults.getFacetValues (index.js?b7c1:646)
    at Object.render (connectRefinementList.js?9457:327)
    at eval (InstantSearch.js?7c68:404)
    at Array.forEach (<anonymous>)
    at InstantSearch._render (InstantSearch.js?7c68:399)
    at AlgoliaSearchHelper.emit (events.js?7e25:146)
    at eval (algoliasearch.helper.js?ea40:1273)
    at arrayEach (_arrayEach.js?8057:15)
    at forEach (forEach.js?6cd4:38)
    at AlgoliaSearchHelper._dispatchAlgoliaResponse (algoliasearch.helper.js?ea40:1266)

Algolia Search Helperの中で、検索結果から取得したFacetの値ではないと言われているようにエラーメッセージからは見えます。

なんか値入ってなかったりするのかな、、

と、思ってクローラーにコメント仕込んでみたら、、、。 あー、なんかちょいちょいありますやね、と。。ってかadtest.htmlなんて要らないや…笑

categories_str is empty: https://www.yoshida.red/2020/04/08/life/
categories_str is empty: https://www.yoshida.red/about.html
tags_str is empty: https://www.yoshida.red/about.html
categories_str is empty: https://www.yoshida.red/adtest.html
tags_str is empty: https://www.yoshida.red/adtest.html
categories_str is empty: https://www.yoshida.red/search.html
tags_str is empty: https://www.yoshida.red/search.html

ってことで、全てのレコードにcategoriesとtagsが入るようになったのですが、、

それでもエラーは解決しなかった、、ついでに、、、

そういえば、なんかちょいちょいいっつもAds by Googleのエラーが出てる気がするのよね。。。また今度時間見つけて対処せねば、、、

O {message: "adsbygoogle.push() error: Only one 'enable_page_level_ads' allowed per page.", name: "TagError", pbr: true, stack: "TagError: adsbygoogle.push() error: Only one 'enab…esyndication.com/pagead/js/adsbygoogle.js:71:409)"}
message: "adsbygoogle.push() error: Only one 'enable_page_level_ads' allowed per page."
name: "TagError"
pbr: true
stack: "TagError: adsbygoogle.push() error: Only one 'enable_page_level_ads' allowed per page.↵    at Bk (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:189:295)↵    at Ak (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:188:707)↵    at Fk (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:195:365)↵    at b (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:196:36)↵    at Gk (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:196:239)↵    at Kk (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:203:130)↵    at Ik (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:198:281)↵    at https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:197:43↵    at lf.l.fa (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:63:290)↵    at xf (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:71:409)"
__proto__: Error

次の日になってやったこと

Vue InstantSearchに ais-state-resultsというwidgetがあって、日本語で説明は難しいんだけど、取得した値に応じてホゲホゲするのに便利そう、と。

The ais-state-results allows you reach into the current search state, for example, for conditional rendering or other rendering that depends on what the current refinement or results are.

ということで、v-ifでfacetsがある時〜とかやってたのだけど、それでもダメで、こうなったら _rawResults (Algoliaからのレスポンスそのまんま)を出してやれ！ってことで👇こんなことしてみたんだけど、、、

<ais-state-results>
  <div class="main" slot-scope="{ _rawResults }">
    <p>{{ _rawResults }}</p>

categoriesもtagsもちゃんと入ってそうなのですよね、、

軽く手詰まり感あったので、yarn upgrade-interactiveでAlgoliaも含めた出てきたコンポーネントを片っ端からアップデートかけてビルドし直したりしたんだけど状況変わらず、、

algoliasearch-helper-jsの👇とか関連してるのかな、、

fix(getFacetValues): don't throw error when there's no facet #720

ひょっとして、ヘッダーの検索窓で画面開いた時の空クエリの対処のやり方がまずかったか？とか思ってfacet{}とか加えてみたりしたんだけど、そういうことでもなかったみたい。。

const searchClient = {
  search(requests) {
    if (requests.every(({ params }) => !params.query)) {
      return Promise.resolve({
        results: requests.map(() => ({
          hits: [],
          nbHits: 0,
          nbPages: 0,
          facets: {},
          exhaustiveFacetsCount: true,
          exhaustiveNbHits: true,
          processingTimeMS: 0
        }))
      });
    }
    return algoliaClient.search(requests);
  }
};

search.htmlから発行してるリクエストの全てのSearch Paramsに強制的に👇を付けるようにすれば良いのだろうか、、(ってかどうやってやったらイイんだろ？ｗ)

facet=["categories","tags"]

んー、、明日も追ってみますかねー。