Pulling nested queries into react

[futuristnicole]

I need to get the roll name and roll type in react.

Here is my query...

import gql from "graphql-tag";

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

export default Person;

Here is what I have tried in react

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

                  
                </div>
            )
        });
    }

person name is coming but I can not get roll name or type.

Data is coming into the console.

{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)

[William_Lyon]

Hi @futuristnicole -

in this case person.roll is an array, so you'll need to iterate over it to retrieve the name and type values, either with a map or reduce. Something like this:

  <div key={person.id}>
   {person.name}
   Rolls:
     <ul>

      person.rolls.map( r => {
        return <li>{r.name}<li>
      }
      </ul>
  </div>