reactjs - Como digitar um widget personalizado para a pesquisa instantânea do Algolia React?

Estou tentando digitar corretamente minha lista conectada de Hits do Algolia Instant Search.

Meu componente personalizado de 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);

Quando eu tento usar o componente:

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

Eu recebo um erro de TS dizendo que onSelectUser não existe nesse componente... Quando ignoro esse erro de TS, vejo que as props estão disponíveis dentro do componente SearchResults.

Como devo digitar meu componente corretamente para garantir que os tipos ainda funcionem corretamente?

Resposta #1

Você pode estender a interface HitsProvided exposta por 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 descreveria o formato do seu registro (não o formato do resultado retornado pela API, apenas os atributos).