Gatsby-ContentFul 项目：无法在我的页面中从 Graphql 获取数据

Question

我决定创建一个新技术的小项目，我选择了 Gatsby。让你知道我以前不使用 React 和 GraphQl。所以感谢盖茨比，我还可以看到其他技术。所以，现在，我尝试制作一个可以修改页脚和页眉的索引调查页面。我以 Contentful 为后端，并成功地在 ContentFul 的内容和我的组件页脚之间建立了联系。但是当我尝试在页面index.js 中进行查询时无法获取数据，但它们存在（我在graphql 上检查过）。

我尝试在组件中进行查询，在挂钩中进行查询，然后调用挂钩。但是没有什么改变总是未定义的

在我的index.js：

const  query = graphql`
    query header{
        contentfulHeader {
          id
          titleCard
          descriptionCard
          logoCard {
            file {
              url
            }
          }
        }
      }
    `

const SurveyTitleCard = props => {
  return (
    <>
      <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">
             {query.contentfulHeader.titleCard}
            </div>
            <p>We would love to hear your anonymous thoughts and feedback</p>
          </div>
        </div>
      </div>
    </>
  )
}
// INDEX PAGE
const IndexPage = () => (
  <Layout>
    <SEO title="Home" />
    <SurveyTitleCard />
  </Layout>
)

这里是来自 GraphQl 的数据：

这是我的 gatsby-config.js：

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@AntoineB`,
  },

  plugins: [
    {
      resolve: `gatsby-source-contentful`,
      options:{
        spaceId: `MY_SPACE_ID`,
        accessToken: `MY_ACCESS_TOKEN`,
      },
    },
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

Answer 1

请参阅有关 querying data in components using StaticQuery 的文档

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>
      </>
    )}
  />
)