Question

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

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

在我的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> )中：

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`,
  ],
}

这里是来自GraphQl的数据：

这是我的gatsby-config.js：

# WRITE TESTFILE
    foreach my $filename (@filename){
        chomp $filename;
        if ( -e "$filename/$filename" and -d "$filename/$filename" ){
            print "File already exists\n";
        }
        else {
            open ( TXT_FILE, ">$filename/$filename" );

            print TXT_FILE "Hello World";

            close TXT_FILE;
        }
    }

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

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

1 个答案: