2

我经历了几个类似的问题，但无法解决这个问题。我一直在关注 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;

我从生成的模型文件中传递 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>
        );
    }
4

1 回答 1

0

所以我对教程进行了尝试，并想解释一些部分是如何工作的。

首先我只做了前端部分，所以当它运行时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指的是本地主机，所以我认为您需要正确配置后端以公开/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，因为它们很烂，转而使用 hooks，本教程的其余部分可能仍然有效，您只需要一个函数组件而不是一个类，并且可能useHotels从生成的代码中使用。我强烈建议使用钩子，它们如此迅速地取代了 HOC 是有充分理由的。

我希望这些中的一个或两个能引导你找到足够正确的方向来弄清楚如何继续，快乐的狩猎:)

于 2020-09-22T02:04:57.300 回答