javascript - Gatsby 中的类型错误 : Cannot read property 'data' of undefined . ...src/pages/index.js

Question

我从 ..src/pages/index.js 中的 props 获取 undefined 数据(位于 components 文件夹之外)。但是，我正在 GraphiQL 中获取数据。我是 Gatsby 的新手。如何从 props 获取数据？

....src/pages/index.js

import { Link, graphql } from "gatsby"

const IndexPage = ({ data }) => (
  <>
    {console.log("data: ", data)} //data: undefined
  </>
)

export const query = graphql`
  {
    img: file(relativePath: { eq: "default-background.jpeg" }) {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid_traceSVG
        }
      }
    }
  }
`

export default IndexPage

<小时/>

GraphiQL(在浏览器中):

{
 img: file(relativePath: {eq: "default-background.jpeg"}) {
   childImageSharp {
     fluid {
       src
     }
   }
 }
}

GraphiQL 的回复:

  "data": {
    "img": {
      "childImageSharp": {
        "fluid": {
          "src": "/static/0b5a2394b40bdf231dc6685a512baeff/bc3a8/default-background.jpg"
        }
      }
    }
  }
}

我的目标是从 Prop data中获取data.img.childImageSharp.fluid

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Regular Joe's`,
    description: `some description.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `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/logo.svg`, // 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

这都是因为拼写错误..我忘记了GatsbyImageSharpFluid_tracedSVG中的d

export const query = graphql`
  {
    img: file(relativePath: { eq: "default-background.jpeg" }) {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid_tracedSVG //there was a typo in GatsbyImageSharpFluid_traceSVG
        }
      }
    }
  }`