打字稿错误：仅引用类型，但在此处用作命名空间

Question

我经历了几个类似的问题，但在解决这个问题方面没有取得任何进展。我一直在学习2019年的教程，但我很难找到在2020年做同样事情的正确方法。这是我收到错误的一行：

ERROR: 'HotelsQuery' only refers to a type, but is being used as a namespace here.ts(2702)

type IHotelsProps = HotelsQuery.Props<IHotelsBaseProps> & RouteComponentProps;

我从我的generatedModels文件中传递HotelsQuery，定义为：

export type HotelsQuery = (
{ __typename?: 'Query' }
& { hotels?: Maybe<(
{ __typename?: 'HotelTypeConnection' }
& { edges: Array<Maybe<(
{ __typename?: 'HotelTypeEdge' }
& { node?: Maybe<(
{ __typename?: 'HotelType' }
& Pick<HotelType, 'id' | 'title' | 'body'>
)> }
)>> }
)> }
);

它被传递给的班级：

class Hotels extends React.Component<IHotelsProps, IHotelsState> {
constructor(props: IHotelsProps) {
super(props);
const query = queryString.parse(props.location.search);
this.state = {
searchQuery: query && query.search
? query.search.toString() : undefined
};
}
public render() {
const { searchQuery } = this.state;
const { data } = this.props;
return (
<Row>
<Col span={12} offset={6}>
<Divider>Add Hotel</Divider>
<Divider>Hotels</Divider>
<Input.Search
placeholder="Search..."
enterButton="Search"
defaultValue={searchQuery}
onChange={this.handleSearchQueryChange}
onSearch={this.handleSearch}
/>
{data!.loading ? (
<Spin style={{ marginTop: 16, display: 'block' }} /> )
: (
<div>
{data!.notes!.edges.map(edge => (
<Card
key={edge!.node!.id}
style={{ marginTop: 16 }}
actions={[
<Icon
type="delete"
key={edge!.node!.id}
onClick={() => this.handleDeleteHotel(edge!.node!.id)}
/>
]}
>
<Card.Meta
title={edge!.node!.title}
description={edge!.node!.body}
/>
</Card>
))}
</div>
)}
</Col>
</Row>
);
}

Answer 1

所以我尝试了一下教程，想解释一下几个部分是如何工作的。

首先，我只做了前端部分，所以当运行yarn gql-gen时，我遇到了一个块，因为codegen.yml引用了后端服务器来获取类型(我想是？(

overwrite: true
schema: "<http://localhost:8000/graphql/>"
documents: "src/**/*.ts"
generates:
./src/generatedModels.tsx:
config: {}
plugins:
- "typescript-common"
- "typescript-client"
- "typescript-react-apollo"

这里schema指的是localhost，所以我认为您需要正确配置后端以公开/graphql/目录中的类型。我刚刚收到一个错误，说我没有消息来源，所以这不是因为你有后端设置，或者你发现了另一个可能不正确的解决方案

user@computer simplenote % yarn gql-gen --config codegen.yml
yarn run v1.22.5
$ /.../simplenote/node_modules/.bin/gql-gen --config codegen.yml
/.../simplenote/node_modules/graphql/jsutils/devAssert.js:12
throw new Error(message);
^
Error: Must provide Source. Received: undefined.

我想指出的是，路径node_modules/.bin/gql-gen指示它实际使用的内容，即指向node_modules/graphql-code-generator/__/cli.js的链接，因此您实际与yarn gpl-gen一起使用的库是graphql代码生成器，因此他们网站上的文档可能会有所帮助。

因此，我推荐一些前进的选择：

1. 看看graphql TypeScript React Apollo文档中的配置选项，自编写教程以来，可能有一些默认选项发生了变化，特别是钩子正在大量替换HOC，因此默认值可能会因此而不同
2. 当你运行yarn gql-gen时，请重新检查后端部分是否正在运行，如果你在浏览器中转到http://localhost:8000/graphql/，我希望会有某种数据转储，否则codegen.yml可能无法获得生成相关类型定义所需的信息
3. 放弃使用HOC，转而使用钩子，本教程的其余部分可能仍然有效——您只需要一个函数组件而不是一个类，并可能使用生成的代码中的useHotels。我强烈建议使用挂钩，它们如此迅速地取代了HOC是有充分理由的

我希望其中一个或两个能引导你朝着正确的方向前进，找到如何继续前进的方法，快乐狩猎：(