时间戳

首页 > 解决方案 > 使用 TypeScript 反应 Apollo useQuery 钩子

reactjs - 使用 TypeScript 反应 Apollo useQuery 钩子

问题描述

我正在尝试useQuery使用 TypeScript。

这是我的查询

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

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

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' 如何纠正这种不一致

标签： reactjstypescriptgraphqlreact-apolloapollo-client

解决方案

如果您查看文档，您会发现您需要再创建一个接口来表示数据：

interface FetchLinksData {
  feed: Feed[];
}

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

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

推荐阅读