将嵌套的GraphQL查询拉入React

Question

我需要在react中获取卷名和卷类型。

这是我的查询...

import gql from "graphql-tag";

const Person = gql`
  query Person{
    Person{
      id
      name
      roll {
        name
        type
      }
    }
  }
`;

export default Person;

这是我尝试做出的反应

class HomeStar extends Component {
renderPeson() {
    return this.props.data.Person.map( person => {
        return(
            <div key={person.id}>
                {person.name}
                {person.roll.name}


            </div>
        )
    });
}

人名即将到来，但我无法获得姓名或类型。

数据正在进入控制台。

  {data: {…}}

data:
Person: Array(1)
0:
id: "d333ead0-738a-42b2-9f32-9381a0df07b9"
name: "Anthony Esposito"
roll: Array(1)
0: {name: "Randy Bobs", type: "STAR", __typename: "Roll"}
length: 1
__proto__: Array(0)

如何使滚动数据做出反应？