我正在尝试让 Apollo 与 TypeScript 集成。 我有一个如下所示的 React 类:
interface Data {
allVendors: Array<VendorType>;
}
class AllVendorsQuery extends Query<Data> {}
const ShowVendors: React.SFC<> = props => {
return (
<AllVendorsQuery query={fetchVendors}>
{({ loading, error, data: { allVendors } }) => {
if (loading) {
return 'Loading...';
}
if (error) {
return `Error! ${error.message}`;
}
return (
allVendors &&
allVendors.map((vendor, index: number) => {
return (
<div key={`${vendor.name}_${index}`}>
#<strong>{vendor.id}</strong>
{vendor.name}
</div>
);
})
);
}}
</AllVendorsQuery>
);
};
export default ShowVendors;
查询是:
export default gql`
query GetVendors {
allVendors {
id
name
}
}
`;
TypeScript 提示 [ts] Type 'Data | undefined' 没有属性 'allVendors',也没有字符串索引签名。
出现在这一行:{({ loading, error, data: { allVendors } })
。
但是,如果我使用 apollo-connect
而不是查询组件来重构代码,我不会从 TypeScript 中得到任何提示:
import { graphql, compose, QueryResult } from 'react-apollo';
interface ShowVendorsProps {
data: QueryResult & { allVendors?: VendorType[] };
}
class ShowVendors extends React.Component<ShowVendorsProps> {
render() {
const {
data: { allVendors }
} = this.props;
if (allVendors && allVendors.length > 0) {
return (
<div>
{allVendors.map((vendor, index: number) => {
return (
<div key={`${vendor.name}_${index}`}>
#<strong>{vendor.id}</strong>
{vendor.name}
</div>
);
})}
</div>
);
} else {
return 'Loading';
}
}
}
export default compose(graphql(fetchVendors))(ShowVendors);
两者有什么区别?如何重写第一个语句的类型?
最佳答案
有一个小型库和一个 CLI,可以为服务器(根据您的架构)和客户端(根据您的架构和 GraphQL 文档)生成 TypeScript 类型。它还生成解析器签名并且非常可定制。
您可以在这里尝试:https://github.com/dotansimha/graphql-code-generator
这里有一篇关于该软件包的博客文章; https://medium.com/the-guild/graphql-code-generator-for-typescript-react-apollo-7b225672588f
其背后的想法是让开发人员能够充分利用 GraphQL 和生成的类型,并更轻松地自定义生成的输出。
它还可以生成带有您需要的类型的react-apollo组件。
关于reactjs - 如何让 Typescript 识别 Apollo 查询的类型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50867598/