盖茨比 GraphQL 问题答案

【问题标题】：Gatsby GraphQL issue盖茨比 GraphQL 问题
【发布时间】：2021-08-22 10:56:28
【问题描述】：

我对盖茨比很陌生。我使用 Strapi 作为后端，在我的前端 Gatsby 中，在 GraphQL 操场上，我正在执行以下查询，并得到预期的结果：

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

在我的 Gatsby 前端代码中，我有以下内容：

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

我收到以下错误：

我越来越不确定，我是否有未声明的内容或某处有错字？

【问题讨论】：

console.log(data)的提示符是什么（如果你放在解构之前）
它在解构之前我把它作为你的建议的那一行显示为未定义
这是您导入到主页面组件中的页面组件还是部分（子）组件？

标签： graphql gatsby strapi

【解决方案1】：

您正在不在顶级 (components/SelfAssesment) 中的组件中运行页面查询。从docs可以看到：

使用页面查询查询数据

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

使用 StaticQuery 组件查询数据

StaticQuery 是用于从 Gatsby 的数据中检索数据的组件 non-page components 中的层，例如标题、导航或任何其他子组件。

也就是说，您有两个选择。在顶级组件（页面）中使用查询并将props 向下钻取到组件或使用StaticQuery（或useStaticQuery 挂钩）。

【讨论】：