reactjs - Hoe definieer je een props-interface voor Apollo's React HOC?

Ik probeer Apollo's React HOC te gebruiken om gegevens op te halen en door te geven aan mijn component, maar ik krijg een foutmelding van:

Argument of type 'typeof BrandList' is not assignable to parameter of type 
'CompositeComponent<{ data?: QueryProps | undefined; mutate?: MutationFunc<{}> | undefined; }>'.
Type 'typeof BrandList' is not assignable to type 'StatelessComponent<{ data?: 
QueryProps | undefined; mutate?: MutationFunc<{}> | undefined; }>'.
Type 'typeof BrandList' provides no match for the signature '(props: { data?: 
QueryProps | undefined; mutate?: MutationFunc<{}> | undefined; } & { children?: ReactNode; }, context?: any): ReactElement<any>'.

Mijn bestand ziet er zo uit:

import * as React from 'react'
import {graphql} from 'react-apollo'
import gql from 'graphql-tag'

const BrandsQuery = gql`
  query {
    allBrands {
      id
      name
    }
  }
`

interface IBrand {
  id: string
  name: string
}

interface IData {
  loading: boolean,
  allBrands: IBrand[]
}

interface IProps {
  data: IData
}

class BrandList extends React.Component<IProps, void> {
  public render () {
    const {loading, allBrands} = this.props.data

    if (loading) {
      return (
        <div>Loading data..</div>
      )
    }

    return (
      <div>
        {allBrands.map((brand) => (
          <li>{brand.id} - {brand.name}</li>
        ))}
      </div>
    )
  }
}

export default graphql(BrandsQuery)(BrandList)
                                    ^^^^^^^^^

Als ik {} in plaats van de interface gebruik, compileert de code, maar dan kan ik geen props gebruiken binnen de render-functie.

BEWERKEN :

Ik heb geprobeerd de laatste regel te herschrijven naar

export default graphql<any, IProps>(BrandsQuery)(BrandList)

wat de fout verhelpt, maar nu wanneer ik probeer de component op te nemen als

<div>
    <BrandList />
</div>

Ik krijg de volgende foutmelding:

Type '{}' is not assignable to type 'Readonly<IProps>'.
Property 'data' is missing in type '{}'.

Antwoord #1

Oké, ik heb het probleem op deze manier opgelost.. Ik moest een andere Props-interface toevoegen

interface IExternalProps {
  id: string
}

interface IProps extends IExternalProps {
  data: IData
}

export default graphql<any, IExternalProps}>(BrandsQuery)(BrandList)

In feite is IExternalProps de interface voor de props die je component van buitenaf verwacht, d.w.z. wanneer je de component daadwerkelijk gebruikt in JSX, terwijl IProps de interface is voor de props die je ontvangt via een GraphQL-query (HOC). Deze interface moet de IExternalProps uitbreiden, zodat TypeScript vervolgens de kans krijgt om dit daadwerkelijk te typechecken.