react-instantsearch doesn't support algolia v5

TheOrcDev commented 2 weeks ago

🐛 Current behavior

I upgraded JavaScript API Client to version 5.13.0 successfully, but it is not compatible with InstantSearch component from react-instantsearch anymore.

This is the code:

import { searchClient as algoliaSearch } from "@algolia/client-search";

import { Configure, InstantSearch } from "react-instantsearch";

...

 <InstantSearch
      searchClient={searchClient} <------- here is the problem
      indexName={indexName}
      initialUiState={initialUiState ?? undefined}
    >
      <Configure
        aroundRadius={"all"}
        hitsPerPage={80}
        facetingAfterDistinct={true}
      />
      {children}
</InstantSearch>

The error is type related saying is not assignable to type 'SearchClient'

Is react-instantsearch going to be updated soon to support algolia v5?

🔍 Steps to reproduce

Install latest algolia
Install latest react-instantsearch
Try to use it

Live reproduction

https://www.algolia.com/doc/libraries/javascript/v5/upgrade

💭 Expected behavior

InstantSearch component shouldn't give any errors.

Package version

algoliasearch 5.13.0, react-instantsearch 7.13.7

Operating system

Mac OS 15.0.1

Browser

Chrome

Code of Conduct

[X] I agree to follow this project's Code of Conduct

dhayab commented 2 weeks ago

Hi, InstantSearch is typed to expect the API client coming from algoliasearch or algoliasearch/lite, not from the package you used. You should be able to switch to one of those imports with no impact on your codebase:

import { liteClient as algoliasearch } from 'algoliasearch/lite';
// or
import { algoliasearch } from 'algoliasearch';

TheOrcDev commented 2 weeks ago

Hi, InstantSearch is typed to expect the API client coming from algoliasearch or algoliasearch/lite, not from the package you used. You should be able to switch to one of those imports with no impact on your codebase:
import { liteClient as algoliasearch } from 'algoliasearch/lite';
// or
import { algoliasearch } from 'algoliasearch';

Thanks for answering so quickly! Tried that one already. Seems like it's working, but in both cases InstantSearch is still giving type errors. I'll copy you the entire thing here.

Type '{ transporter: Transporter; appId: string; clearCache(): Promise<void>; readonly _ua: string; addAlgoliaAgent(segment: string, version?: string | undefined): void; ... 5 more ...; search<T>(searchMethodParams: SearchMethodParams | LegacySearchMethodProps, requestOptions?: RequestOptions | undefined): Promise<...>; }' is not assignable to type 'SearchClient'.
  Types of property 'search' are incompatible.
    Type '<T>(searchMethodParams: SearchMethodParams | LegacySearchMethodProps, requestOptions?: RequestOptions | undefined) => Promise<...>' is not assignable to type '<T>(requests: { indexName: string; params: SearchOptions; }[]) => Promise<MultipleQueriesResponse<T>>'.
      Types of parameters 'searchMethodParams' and 'requests' are incompatible.
        Type '{ indexName: string; params: SearchOptions; }[]' is not assignable to type 'SearchMethodParams | LegacySearchMethodProps'.
          Type '{ indexName: string; params: SearchOptions; }[]' is not assignable to type 'LegacySearchMethodProps'.
            Type '{ indexName: string; params: SearchOptions; }' is not assignable to type 'LegacySearchQuery'.
              Type '{ indexName: string; params: SearchOptions; }' is not assignable to type 'LegacySearchForHits'.
                Type '{ indexName: string; params: SearchOptions; }' is not assignable to type 'LegacySearchParams'.
                  Types of property 'params' are incompatible.
                    Type 'SearchOptions' is not assignable to type 'SearchParamsObject'.
                      Type 'SearchOptions' is not assignable to type 'BaseSearchParamsWithoutQuery'.
                        Types of property 'facetFilters' are incompatible.
                          Type 'string | readonly string[] | readonly (string | readonly string[])[] | undefined' is not assignable to type 'FacetFilters | undefined'.
                            Type 'readonly string[]' is not assignable to type 'FacetFilters | undefined'.
                              The type 'readonly string[]' is 'readonly' and cannot be assigned to the mutable type 'FacetFilters[]'.ts(2322)
InstantSearch.d.ts(42, 5): The expected type comes from property 'searchClient' which is declared here on type 'IntrinsicAttributes & UseInstantSearchApiProps<UiState, UiState> & { children?: ReactNode; }'

dhayab commented 2 weeks ago

There could be a version conflict in your package dependencies.

Could you ideally reproduce this behavior using the following sandbox as a starting point: https://codesandbox.io/p/sandbox/gh-6426-rhlwdn?

You can also check that if you have declared multiple algoliasearch related packages, that they target the same version (but you only need algoliasearch).

algolia / instantsearch