如何为 Apollo 的 React HOC 定义 props 接口？

Posted 2023-03-10

【中文标题】如何为 Apollo 的 React HOC 定义 props 接口？

【英文标题】：How to define props interface for Apollo's React HOC?

【发布时间】：2017-11-05 11:05:47

【问题描述】：

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

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

我的文件如下所示：

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

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

编辑：

我已经尝试将最后一行改写为

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

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

<div>
    <BrandList />
</div>

我收到以下错误：

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

【参考方案1】：

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

interface IExternalProps 
  id: string


interface IProps extends IExternalProps 
  data: IData


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

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

【讨论】：

你的意思是graphql HOC 期望IExternalProps 暴露的道具？

@LiauJianJie 是的。

请注意，在您标记any 的地方，Apollo 文档将 Apollo 有效负载的类型：apollographql.com/docs/react/features/…