盖茨比内容项目：无法从我的页面中的Graphql获取数据

我决定用新技术创建一个小项目，我选择了盖茨比。让您知道我以前没有使用React和GraphQl。所以多亏了盖茨比，我还可以看到其他技术。所以，现在，我尝试制作一个索引调查页面，其中页脚和页眉是可修改的。我选择了我的后端Contentful，并成功地实现了Contentful中的内容与我的组件页脚之间的连接。但是当我试图在

index.js

页面中进行查询时，不可能获得数据，但它们确实存在（我在graphql上进行了检查）

我尝试在组件中进行查询，在钩子中进行查询，然后调用钩子。但没有什么变化总是不确定的

在我的

index.js

中：

const query=graphql`
查询头{
内容标题{
身份证件
标题牌
描述卡
标识牌{
文件{
网址
}
}
}
}
`
const surveytilecard=道具=>{
返回(
{query.contentfulHeader.titleCard}
我们希望听到您的匿名想法和反馈

)
}
//索引页
常量索引页=（）=>(
)

以下是GraphQl中的数据：

这里是我的gatsby-config.js：

module.exports={
站点元数据：{
标题：`Gatsby Default Starter`，
描述：`使用此默认启动程序启动下一个伟大的盖茨比项目。此裸骨启动程序附带您可能需要的主要盖茨比配置文件。`，
作者：`@AntoineB`，
},
插件：[
{
解析：`gatsby source contentful`，
选项：{
spaceId:`MY\u SPACE\u ID`，
accessToken:`MY_ACCESS_TOKEN`，
},
},
`盖茨比`，
{
解析：`gatsby源文件系统`，
选项：{
名称：`images`，
路径：`${uu dirname}/src/images`，
},
},
`盖茨比变压器，
`盖茨比，
{
解析：`gatsby插件清单`，
选项：{
名称：`gatsby starter default`，
短名称：`starter`，
起始url:`/`，
背景颜色：“663399”，
主题颜色：“663399”，
显示：`minimal ui`，
icon:`src/images/gatsby icon.png`，//此路径相对于站点的根目录。
},
},
//此（可选）插件支持渐进式Web App+脱机功能
//要了解更多信息，请访问：https://gatsby.dev/offline
//“盖茨比插件离线”，
],
}

参见有关

从“React”导入React
从“盖茨比”导入{StaticQuery，graphql}
导出默认值（）=>(
(
{data.contentfulHeader.titleCard}
我们希望听到您的匿名想法和反馈

)}
/>
)

请将您的

gatsby config.js

添加到您的问题中，因为不清楚您是否已将gatsby与第三方API（）连接，但如果您的数据是静态的，根据gatsby文档，您的数据将在props参数中。因此，我添加了我的gatsby-config.js，而不是

{query.contentfulHeader.titleCard}

提供`{props.data.contentfulHeader.titleCard}@yevhenihiherasymchuk。但是我直接在索引中进行查询。根据文档，我们无法在pagesOkay中进行静态查询。我成功地通过创建一个外部组件并使用它来实现它。另一个选项是将查询到的数据从页面显式地传递给任何需要它的子组件。

import React from "react"
import { StaticQuery, graphql } from "gatsby"

export default () => (
  <StaticQuery
    query={graphql`
        query header{
        contentfulHeader {
          id
          titleCard
          descriptionCard
          logoCard {
            file {
              url
            }
          }
        }
      }
    `}
    render={data => (
      <>
        <div className="row">
          <div className="survey-title card blue-grey darken-3 col s10 offset-s1 m6 offset-m3">
            <div className="card-content grey-text text-lighten-3 center-align">
              <div className="row logo valign-wrapper">
                <div className="col s6 offset-s3 m4 offset-m4">
                  <img
                    className="responsive-img"
                    src=""
                    alt="logo company"
                  />
                </div>
              </div>
              <div className="card-title">
               {data.contentfulHeader.titleCard}
              </div>
              <p>We would love to hear your anonymous thoughts and feedback</p>
            </div>
          </div>
        </div>
      </>
    )}
  />
)