Graphql 盖茨比图形问题

我对盖茨比不太熟悉。我使用Strapi作为后端，在我的前端Gatsby中，在GraphQL游乐场中，我正在执行以下查询，并获得预期结果：

query MyQuery {
  strapiAssessment {
    title
    rating {
      id
      topic
      rate
    }
  }
}

在我的盖茨比前端代码中，我有以下内容：

import React from "react"
import Title from "../components/Title"
import { graphql } from "gatsby"

const SelfAssesment = ({ data }) => {
  const {
    strapiAssessment: { title, rating },
  } = data
  console.log(data)
  return (
    <section className="section jobs">
      <Title title={title} />
      <div className="about-stack">
        <p>Rankning i olika teknologier:</p>
        {rating.map(item => {
          return <span key={item.id}>{item.topic}</span>
        })}
      </div>
      <div className="about-stack">
        {rating.map(item => {
          return <span key={item.id}>{item.rate}</span>
        })}
      </div>
    </section>
  )
}

export const query = graphql`
  {
    strapiAssessment {
      title
      rating {
        id
        topic
        rate
      }
    }
  }
`

export default SelfAssesment

从“React”导入React
从“./组件/标题”导入标题
从“盖茨比”导入{graphql}
常量自评估=（{data}）=>{
常数{
战略评估：{标题，评级}，
}=数据
console.log（数据）
返回(
Rankining i olika技术专家：

{rating.map（项=>{
返回{item.topic}
})}
{rating.map（项=>{
返回{item.rate}
})}
)
}
export const query=graphql`
{
Strapiassement{
标题
评级{
身份证件
话题
率
}
}
}
`
导出默认自评估

我得到以下错误：

---

我没有定义，我是否有未声明的内容或某个输入错误？

您正在一个不在顶级（

components/selfassessment

）的组件中运行页面查询。正如您可以从中看到的：

使用页面查询查询数据

您可以使用

graphql

标记查询Gatsby页面中的数据 地点。这使您可以访问盖茨比数据中包含的任何内容 层，如站点元数据、源插件、图像等

使用StaticQuery组件查询数据

StaticQuery

是从盖茨比的数据中检索数据的组件 层，例如标题、导航或任何 其他子组件

---

也就是说，你有两个选择。在顶级组件（页面）中使用查询，并向下钻取

道具

到该组件，或使用

静态查询

（或

使用静态查询

钩子）。

控制台.log（data）的提示是什么（如果将其放在解构之前）它显示为未定义，在解构之前我将其作为您的建议放置在该行中。这是一个页面组件还是您导入到主页组件中的部分（子）组件？我尝试了一个静态查询，谢谢：）