Graqhql查询可以用，但因为多维数组而无法使用。

Question

我的开发环境目前是gatsby，而我在将graqhql与gatsby集成时遇到了麻烦。我知道这个graphql查询是正确的，因为它的输出是正确的，但是因为有两个数组，group[ edges []]，我不知道如何调用它们。任何hehelp将是非常感激的，谁能给我一些建议。我是一个比较新的程序员，所以这些都让我有点困惑。

在我的tune-awesome.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

你只需要再做一个循环就可以了。

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)