Preventing empty search query in React Hooks (Typescript)

Open Q&A
1

I’m attempting to prevent InstantSearch’s initial search with an empty query in my component, and I followed the documentation outlined here Conditional requests with React InstantSearch Hooks | Algolia

However, upon wrapping the search client and passing it to the Instant Search like so, I’m getting a type error:

export const algoliaSearchClient = algoliasearch(
  nextAppEnv.algolia.appId,
  nextAppEnv.algolia.apiKey
);

export const preventEmptySearchClient = {
  // A custom search client that prevents empty queries. This structure can be used for
  // any custom search client that needs custom logic before searching
  ...algoliaSearchClient,
  search(requests) {
    if (requests.every(({ params }) => !params.query)) {
      return Promise.resolve({
        results: requests.map(() => ({
          hits: [],
          nbHits: 0,
          nbPages: 0,
          page: 0,
          processingTimeMS: 0,
          hitsPerPage: 0,
          exhaustiveNbHits: false,
          query: '',
          params: '',
        })),
      });
    }

    return algoliaSearchClient.search(requests);
  },
};

<InstantSearch
          indexName={indexName}
          searchClient={preventEmptySearchClient}
          initialUiState={initialState}
          stalledSearchDelay={500}
        >

Type ‘{ search(requests: any): Promise<{ results: any; }> | Readonly<Promise<MultipleQueriesResponse>>; appId: string; transporter: Transporter; … 4 more …; customRequest: (request: Request, requestOptions?: RequestOptions | undefined) => Readonly<…>; }’ is not assignable to type ‘SearchClient’.

Does anyone have any insight?