使用 TypeScript 反应 Apollo useQuery 钩子

Posted 2023-03-08

【中文标题】使用 TypeScript 反应 Apollo useQuery 钩子

【英文标题】：React Apollo useQuery hook with TypeScript

【发布时间】：2020-10-19 08:48:38

【问题描述】：

我正在尝试让 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 hook

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

【问题讨论】：

显而易见的解决方案是编辑 graphql-codegen 生成的 Feed 类型，但感觉不是正确的方法

试试useQuery< feed: Feed >

【参考方案1】：

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

【参考方案2】：

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

interface FetchLinksData 
  feed: Feed[];

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

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

【参考方案3】：

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

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

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

interface FetchLinksData 
  feed: Feed