将 GraphQL 数据导入 Gatsby

Question

我在操场上有一个有效的查询。但不确定如何将这些数据放入页面？以下是我的工作查询。

我是否使用<p>{data.node.GitHub_Repository.name}</p> 来获取相关数据，我正在为我的个人网站构建类似于 GitHub 个人资料页面上固定存储库的东西。

尝试了一些东西，但总是得到TypeError: undefined is not an object (evaluating....

const PinnedRepos = () => {
    const data = useStaticQuery(graphql`
    query{
        github {
          user(login: "mrpbennett") {
            pinnedItems(first: 6, types: REPOSITORY) {
                edges {
                node {
                    ... on GitHub_Repository {
                    name
                    description
                    url
                    primaryLanguage {
                        name
                        color
                    }
                    }
                }
                }
            }
            }
        }
      }
    `)

    return (
        <div>
            <p>{data.node.GitHub_Repository.name}</p>
        </div>
    )
}

游乐场查询如下：

query{
        github {
          user(login: "mrpbennett") {
            pinnedItems(first: 6, types: REPOSITORY) {
                edges {
                node {
                    ... on GitHub_Repository {
                    name
                    description
                    url
                    primaryLanguage {
                        name
                        color
                    }
                    }
                }
                }
            }
            }
        }
      }

Answer 1

您没有正确访问查询数据。另请注意，pinnedItems 被定义为一个数组，因此您必须对其进行映射并呈现如下所示的节点名称

return (
    <div>
        {data.github.user.pinnedItem.edges.map(({node}) => <p>{node.name}</p>)
    </div>
)