如何为 Apollo 的 React HOC 定义 props 接口? [英] How to define props interface for Apollo's React HOC?

问题描述

我正在尝试使用 Apollo 的 React HOC 来获取数据并将其传递给我的组件，但出现以下错误:

typeof BrandList"类型的参数不可分配给类型参数'CompositeComponent<{ data?: QueryProps |不明确的;mutate?: MutationFunc<{}>|不明确的;}>'.类型 'typeof BrandList' 不能分配给类型 'StatelessComponent<{ data?:查询道具 |不明确的;mutate?: MutationFunc<{}>|不明确的;}>'.类型 'typeof BrandList' 不匹配签名 '(props: { data?:查询道具 |不明确的;mutate?: MutationFunc<{}>|不明确的;&{ 孩子?:ReactNode;}, context?: any): ReactElement'.

我的文件如下所示:

import * as React from 'react'从反应阿波罗"导入 {graphql}从'graphql-tag'导入gqlconst BrandsQuery = gql`询问 {所有品牌{ID名称}}`接口品牌{id:字符串名称:字符串}接口 IData {加载:布尔值，所有品牌:IBrand[]}接口 IProps {数据:IData}class BrandList 扩展了 React.Component{公共渲染(){const {loading, allBrands} = this.props.data如果(加载){返回 (<div>正在加载数据..</div>)}返回 (<div>{allBrands.map((品牌) => (<li>{brand.id} - {brand.name}</li>))}

)}}导出默认 graphql(BrandsQuery)(BrandList)^^^^^^^^^^

如果我使用 {} 而不是接口，代码会编译，但是我不能在 render 函数中使用任何道具.

我试图将最后一行重写为

export default graphql(BrandsQuery)(BrandList)

消除了错误，但是现在当我尝试将组件包含为

<品牌列表/>

我收到以下错误:

类型{}"不可分配给类型Readonly".类型{}"中缺少属性数据".

解决方案

好的，我已经解决了这个问题..我不得不添加另一个 Props 接口

interface IExternalProps {id:字符串}接口 IProps 扩展 IExternalProps {数据:IData}export default graphql(BrandsQuery)(BrandList)

基本上，IExternalProps 是组件期望从外部获取的 props 的接口，即.当您在 JSX 中实际使用该组件时，IProps 是您通过 GraphQL 查询 (HOC) 接收到的 props 的接口.这个接口必须扩展IExternalProps，然后Typescript才有机会实际进行类型检查.

I am trying to use Apollo's React HOC to fetch and pass data to my component, but I'm getting an error of:

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>'.

My file looks like this:

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)
                                    ^^^^^^^^^

If I use {} instead of the interface, the code compiles, but then I can't use any props inside the render function.

EDIT:

I have tried to rewrite the last line to

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

which gets rid of the error, but now when I try to include the component as

<div>
    <BrandList />
</div>

I am getting following error:

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

解决方案

Okay, I have solved the issue like this.. I had to add another Props interface

interface IExternalProps {
  id: string
}

interface IProps extends IExternalProps {
  data: IData
}

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

Basically, IExternalProps is the interface for props your component expects from the outside, ie. when you actually use the component in JSX, while IProps is the interface for props you receive via GraphQL query (HOC). This interface must extend the IExternalProps, Typescript then have a chance to actually type check it.

这篇关于如何为 Apollo 的 React HOC 定义 props 接口?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！