reactjs - Jak napsat vlastní widget pro Algolia React instant search?

Snažím se správně napsat můj propojený seznam výsledků z Algolia Instant Search.

Moje vlastní komponenta Hits:

type Props = { hits: User[]; onSelectUser: (user: User) => void };

const SearchResults: React.FC<Props> = ({ hits, onSelectUser }) => {
  return hits.map((hit: User) => (
    <UserCard user={hit} onSelectUser={onSelectUser} />
  ));
};

export default connectHits<Props>(SearchResults);

Když se pokusím použít komponentu:

<Hits hitComponent={() => (<SearchResults onSelectUser={setSelectedUser} />)}/>

Dostávám chybu TS, že onSelectUser neexistuje na této komponentě... Když tuto chybu TS ignoruji, vidím, že props jsou dostupné uvnitř komponenty SearchResults.

Jak by měl správně napsat svůj komponent, aby typování stále fungovalo správně?

Odpověď č. 1

Můžete rozšířit rozhraní HitsProvided, které poskytuje react-instantsearch-core.

import { HitsProvided } from "react-instantsearch-core";

// ...

type Props = HitsProvided<UserRecord> & {
  onSelectUser: (user: User) => void;
};

const SearchResults: React.FC<Props> = ({ hits, onSelectUser }) => {
  return hits.map((hit: User) => (
    <UserCard user={hit} onSelectUser={onSelectUser} />
  ));
};

export default connectHits<Props, UserRecord>(SearchResults);

UserRecord by popisoval tvar vašeho záznamu (ne tvar výsledku vráceného API, pouze atributy).