使用 TypeScript 反应 Apollo useQuery 钩子

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

除了 typescript 插件外，您还应该使用 typescript-operations 插件。这样，您不仅会为模式中的 GraphQL 类型生成 TS 类型，还会根据您在客户端使用的实际查询生成类型。然后可以将这些附加类型直接插入挂钩使用的类型变量中。

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

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

interface FetchLinksData {
  feed: Feed
}

Answer 2

如果您选中 documentation，您会发现您需要再创建一个接口来表示数据：

interface FetchLinksData {
  feed: Feed[];
}

在组件中你可以这样使用它：

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

Answer 3

由于您使用的是 react-apollo 提供的钩子，因此您可能还应该使用官方 apollo cli 工具来生成类型 - https://github.com/apollographql/apollo-tooling#apollo-clientcodegen-output。 Apollo codegen 生成开箱即用的正确类型，无需担心添加额外的插件。

使用 TypeScript 反应 Apollo useQuery 钩子

React Apollo useQuery hook with TypeScript

reactjs

typescript

graphql

react-apollo

apollo-client