Question

我正在尝试使用useQuery钩子来使用TypeScript。

这是我的查询

export const FETCH_LINKS = gql`
  query FetchLinks {
    feed {
      links {
        id
        createdAt
        url
        description
     }
  }
}
`;

我使用graphql-codegen从GraphQL模式生成了类型

export type Feed = {
  __typename?: 'Feed';
  links: Array<Link>;
  count: Scalars['Int'];
};

export type Link = {
  __typename?: 'Link';
  id: Scalars['ID'];
  createdAt: Scalars['DateTime'];
  description: Scalars['String'];
  url: Scalars['String'];
  postedBy?: Maybe<User>;
  votes: Array<Vote>;
};

在组件中，将类型应用于useQuery钩子

const { data, loading, error } = useQuery<Feed>(FETCH_LINKS);

问题在于，在data变量中，我收到了以下形状的对象：

{
feed: {
  __typename
  links
  count
  }
}

因此，为了遍历链接数组并在页面上呈现它们，我需要做data.feed.links.map()，但是Feed类型上没有feed属性因此，我收到一条错误消息Property 'feed' does not exist on type 'Feed' 我该如何纠正这种矛盾

Answer 1

如果选中documentation，您将看到需要再创建一个接口来表示数据：

interface FetchLinksData {
  feed: Feed[];
}

在组件中，您可以这样使用：

const { data, loading, error } = useQuery<FetchLinksData>(FETCH_LINKS);
const feeds = data.feed;

Answer 2

除了typescript插件之外，您还应该使用typescript-operations插件。这样，您不仅将为架构中的GraphQL类型生成TS类型，而且还将基于使用客户端的实际查询生成类型。然后可以将这些其他类型直接插入到钩子使用的类型变量中。

或者，您也可以使用typescript-react-apollo插件为您生成钩子。

如果您不想使用任何其他插件，则需要自己为查询和变量构造适当的类型：

interface FetchLinksData {
  feed: Feed
}

Answer 3

由于您使用的是override func viewWillAppear(_ animated: Bool) { super.viewWillAppear(animated) tableView.addSubview(applyButton) applyButton.anchor(left: tableView.leftAnchor, bottom: tableView.safeAreaLayoutGuide.bottomAnchor, right: tableView.rightAnchor, leftConstant: 16, bottomConstant: 16, rightConstant: 16, widthConstant: tableView.bounds.width - 32, heightConstant: 46) }提供的钩子，因此您可能还应该使用官方的react-apollo cli工具来生成类型-https://github.com/apollographql/apollo-tooling#apollo-clientcodegen-output。 Apollo代码生成器可以立即生成正确的类型，而不必担心添加其他插件。

使用TypeScript反应Apollo useQuery钩子

3 个答案: