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

[bidoubiwa]

The current type of facets in the searchOptions is:

algoliasearch-client-javascript/packages/client-search/src/types/SearchOptions.ts

Line 104 in ba59b68

readonly facets?: readonly string[];

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

[Haroenv]

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

[bidoubiwa]

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]

I added a console.log here:

algoliasearch-client-javascript/packages/client-search/src/methods/client/multipleQueries.ts

Lines 11 to 35 in ba59b68

	export const multipleQueries = (base: SearchClient) => {
	return <TObject>(
	queries: readonly MultipleQueriesQuery[],
	requestOptions?: RequestOptions & MultipleQueriesOptions
	): Readonly<Promise<MultipleQueriesResponse<TObject>>> => {
	const requests = queries.map(query => {
	return {
	...query,
	params: serializeQueryParameters(query.params || {}),
	};
	});
	return base.transporter.read(
	{
	method: MethodEnum.Post,
	path: '1/indexes/*/queries',
	data: {
	requests,
	},
	cacheable: true,
	},
	requestOptions
	);
	};
	};

These are my filters:

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