使用 TypeScript 在 React 中从 GraphQL 查询访问嵌套数据时出现问题

Question

我已经使用以下结构设置了一个 GraphQL 查询，我将其传递给 React 进行渲染：

 {
  events{
    id
    name
    startDate
    endDate
    subscribedUsers{
      id
      name
    }
  }
}

我有两个具体问题：

在一个视图中，我有一个 table，我想在其中显示事件详细信息和订阅用户的数量。当我 console.log 订阅用户时，它看起来像一个数组，它没有 .length 属性我可以参考，而且我似乎无法对其应用数组方法来获取长度.当我尝试用

{props.event.subscribedUsers.length}

我收到错误 Property 'length' does not exist on type '{ id: string; name: string; }'.ts(2339)

在单个事件的详细信息的第二个视图中，我想将用户的名称映射到子组件以进行渲染，但因为它似乎不是真正的数组，所以映射没有'工作：

{props.subscribedUsers.map((attendee: attendeeType) => {...}}

returns类似错误Property 'length' does not exist on type '{ id: string; name: string; }'.ts(2339)

有什么方法可以将订阅的用户数据转换成我可以正常访问的数组，或者我怎样才能最好地获取数据？

感谢您的帮助。马克

Answer 1

你居然指出了原因。查看架构 - 错误提示数据不是数组。它是一个普通对象，您可以使用简单的点符号访问它，例如：

{props.subscribedUsers.id} or   {props.subscribedUsers.name}

Problem accessing nested data from a GraphQL query in React with TypeScript