GatsyJS, GraphQL - отображение проблем через массив.

Question

Я создаю разделенный сайт друпалов с GatsbyJS.Я пытаюсь отобразить заголовок nodePersonalInformation.Вот запрос на игровой площадке GatbyJS graphQL:

{
  allUserUser(filter: {name: {eq: "bobdole"}}) {
    edges {
      node {
        name
        relationships {
          nodePersonalInformation {
            title
          }
        }
      }
    }
  }
}

Результат запроса:

{
  "data": {
    "allUserUser": {
      "edges": [
        {
          "node": {
            "name": "bobdole",
            "relationships": {
              "nodePersonalInformation": [
                {
                  "title": "bobdole"
                },
                {
                  "title": "bobdole"
                }
              ]
            }
          }
        }
      ]
    }
  }
}

Я успешно отображаю «имя» с помощью этих переменных:

const data = this.props.data.allUserUser.edges
const personalInfo = data.map(pI => <span>{pI.node.name}</span>)

Однако, поскольку «nodePersonalInformation» является массивом, я не могу понять, как отобразить «title».Я попробовал .map внутри .map без удачи.Любая помощь будет оценена.

Спасибо, Энди

Answer 1

Вы можете получить два свойства заголовка, содержащиеся в nodePersonalInformation, а затем получить первый элемент этого массива.

Для этого, прежде всего, вы должны получить nodePersonalInformation.
Попробуйте с помощью этого

const titles = data.map(edge => edge.node.relationships.nodePersonalInformation.map(title => title)[0]);

[0] в конце строки, чтобы получитьтолько первый результат первого map.Если вы этого не сделаете, вы получите массив массивов.

После этого вы можете получить нужный заголовок с помощью этой строки:
const uniqueTitle = title[0]

Если у вас всегда есть одно ребро, вы также можете принудительно получить первый ребро:
const data = this.props.data.edges[0].Таким образом, вам не нужно [0] при получении массива заголовков.