如何为 Apollo 的 React HOC 定义 props 接口?
How to define props interface for Apollo's React HOC?
我正在尝试使用 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 '{}'.
好的,我已经解决了这个问题..我不得不添加另一个 Props 接口
interface IExternalProps {
id: string
}
interface IProps extends IExternalProps {
data: IData
}
export default graphql<any, IExternalProps}>(BrandsQuery)(BrandList)
基本上,IExternalProps
是您的组件期望来自外部的 props 的接口,即。当你实际使用 JSX 中的组件时,IProps
是你通过 GraphQL 查询(HOC)接收的道具的接口。此接口必须扩展 IExternalProps
,然后 Typescript 才有机会对其进行实际类型检查。
我正在尝试使用 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 '{}'.
好的,我已经解决了这个问题..我不得不添加另一个 Props 接口
interface IExternalProps {
id: string
}
interface IProps extends IExternalProps {
data: IData
}
export default graphql<any, IExternalProps}>(BrandsQuery)(BrandList)
基本上,IExternalProps
是您的组件期望来自外部的 props 的接口,即。当你实际使用 JSX 中的组件时,IProps
是你通过 GraphQL 查询(HOC)接收的道具的接口。此接口必须扩展 IExternalProps
,然后 Typescript 才有机会对其进行实际类型检查。