Запрос Graqhql работает, но не может его использовать из-за многомерных массивов

Question

У меня есть этот файл, и я не могу заставить его работать. Моя среда разработки в настоящее время - gatsby, и у меня возникают проблемы с интеграцией graqhql с gatsby. Я точно знаю, что запрос graphql правильный, потому что он выводит, но поскольку есть два массива, group [edge []], я не знаю, как их вызвать. Любой хелп был бы очень признателен, мог бы кто-нибудь дать мне совет. Я относительно новый программист, поэтому все это меня немного смущает.

в моей прекрасной мелодии js страница

    import {graphql, StaticQuery } from 'gatsby'

    class BlogRoll extends React.Component {
      render() {
        const { data } = this.props
        const { group} = data.allSongsJson

        return (
            {group.map(({ edges }) =>
                   <p>{node.filesize}</p>
                  </div>
                </div>
              ))}
        )
      }
    }


    export default () => (
      <StaticQuery
        query={graphql`
          query byTuneAwemeQuery {
              allSongsJson {
                group(field: tune) {
                  edges {
                    node {
                      filesize                   }
                }
               }
              }
            }
        `}
        render={(data, count) => <BlogRoll data={data} count={count} />}
      />
    )```


    }
    ~                                                                                                                                                                                                                                                                                                                            
    ~                                                                                                                                                                                                                                                                                                                            
    ~                                                                                                                                                                                                                                                                                                                          

Answer 1

Вам просто нужно сделать еще один l oop:

groups.map(({ edges }) => {
  edges.map(({ node }, index) => {
    <p key={index}>{node.filesize}</p>
  })
})

Вы можете немного упростить это вложение, используя nodes вместо edges.node в вашем запросе и используя псевдоним для краткости / ясность:

query byTuneAwemeQuery {
  songData: allSongsJson {
    groups: group(field: tune) {
      nodes {
        filesize
      }
    }
  }
}

Который вы затем получили бы доступ примерно так:

const { data: songData } = this.props

// first node filesize for each group:
songData.groups.map(group => group.nodes[0].filesize)