algoliasearch-client-javascript icon indicating copy to clipboard operation
algoliasearch-client-javascript copied to clipboard

Type error in searchOptions["facets"] which should also accept `string`

Open bidoubiwa opened this issue 3 years ago • 3 comments

The current type of facets in the searchOptions is:

https://github.com/algolia/algoliasearch-client-javascript/blob/ba59b68aa9494c29e284ed45e924267d7388baa9/packages/client-search/src/types/SearchOptions.ts#L104

Nonetheless, while this is true when no facets are checked, once it is facets may contain a string.

Screenshot 2022-12-13 at 17 58 29 Screenshot 2022-12-13 at 17 58 40

bidoubiwa avatar Dec 13 '22 17:12 bidoubiwa

Normally facets gets casted back to an array in all/almost all use cases, which is why it's an array in these types here. Where is it a string for you? it looks like the issue may slightly be incomplete

Haroenv avatar Dec 13 '22 17:12 Haroenv

Hey @Haroenv , thanks for the quick reply.

I'm going to check with instantsearch response to see if indeed that's the case when using algoliasearch

bidoubiwa avatar Dec 13 '22 17:12 bidoubiwa

I added a console.log here:

https://github.com/algolia/algoliasearch-client-javascript/blob/ba59b68aa9494c29e284ed45e924267d7388baa9/packages/client-search/src/methods/client/multipleQueries.ts#L11-L35

These are my filters:

Screenshot 2022-12-13 at 18 23 54

This is what appears in my console:

[
  {
    "indexName": "movies",
    "params": {
      "facetFilters": [
        [
          "genres:Action"
        ]
      ],
      "facets": [
        "genres"
      ],
      "highlightPostTag": "</ais-highlight-0000000000>",
      "highlightPreTag": "<ais-highlight-0000000000>",
      "maxValuesPerFacet": 10,
      "query": "",
      "tagFilters": ""
    }
  },
  {
    "indexName": "movies",
    "params": {
      "analytics": false,
      "clickAnalytics": false,
      "facets": "genres",
      "highlightPostTag": "</ais-highlight-0000000000>",
      "highlightPreTag": "<ais-highlight-0000000000>",
      "hitsPerPage": 0,
      "maxValuesPerFacet": 10,
      "page": 0,
      "query": ""
    }
  }
]

This is my instantsearch setup:

import algoliasearch from "algoliasearch";
import {
  InstantSearch,
  SearchBox,
  Hits,
  Highlight,
  RefinementList
} from "react-instantsearch-dom";


const searchClient = algoliasearch("x","x");

const Hit = ({ hit }: { hit: Record<string, any> }) => {
  return (
    <div key={hit.id}>

      <div className="hit-name">
        <Highlight attribute="title" hit={hit} />
      </div>
    </div>
  );
};

export default function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="movies">
      <RefinementList attribute="genres" />
      <SearchBox />
      <Hits hitComponent={Hit} />
    </InstantSearch>
  );
}

and these are my package versions:

    "@types/react-instantsearch-dom": "6.12.3",
    "algoliasearch": "../algoliasearch-client-javascript/packages/algoliasearch", // "version": "4.14.2",
    "algoliasearch-helper": "3.11.1",
    "react-instantsearch-dom": "^6.38.1"

If you like I can also try it out in a vanilla javascript environment

bidoubiwa avatar Dec 13 '22 17:12 bidoubiwa