文章/答案/技术大牛

发布

社区首页 >问答首页 >用TypeScript反应阿波罗useQuery钩子

问用TypeScript反应阿波罗useQuery钩子
EN

Stack Overflow用户

提问于 2020-06-29 16:19:06

回答 3查看 4.6K关注 0票数 4

我正在尝试让useQuery hook和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'如何纠正这种不一致

graphql

react-apollo

apollo-client

reactjs

typescript

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-06-29 16:28:27

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

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

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

interface FetchLinksData {
  feed: Feed
}

票数 6

Stack Overflow用户

发布于 2020-06-29 16:28:46

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

interface FetchLinksData {
  feed: Feed[];
}

在component中，您可以像这样使用：

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

票数 6

Stack Overflow用户

发布于 2020-07-02 20:51:07

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

票数 -2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62633904

复制

相似问题

问用TypeScript反应阿波罗useQuery钩子
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用TypeScript反应阿波罗useQuery钩子EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用TypeScript反应阿波罗useQuery钩子
EN