在将参数从index.js移动到GatsbyJS中的组件（使用Contenful和GraphQL）之后，无法读取未定义的属性'allContentfulBlogPost'

Question

将查询从index.js移动到midsection.js（一个组件）给出了无法读取未定义的属性。

我用GatsbyJS创建了一个网站，它从Contentful获取内容。我通过使用GatsbyJS和Contentful教程构建一个快速的网站来实现这一目标：https://www.youtube.com/watch?v=wlIdop5Yv_Y

在本教程中，您将学习制作查询的基础知识，该查询在主页上显示Contentful中的内容。

因为我喜欢使用Bulma，而且我对GatsbyJS（React的新手）也很陌生。我决定下载Gatsby-Bulma-Quickstart（https://www.gatsbyjs.org/starters/amandeepmittal/gatsby-bulma-quickstart）并将其与我自己的网站进行比较并使用我需要的东西。

我决定使用Quickstart中使用的组件结构，并希望移动查询以将我的内容从index.js传递到midsection.js。

在移动查询之前，我完成了所有工作。

我的index.js看起来像这样：

import React from 'react'
import { Link } from 'gatsby'
// import Layout from '../components/layout';

const BlogPost = ({node}) => {
  return (
    <li>
      <Link to={node.slug}><h3>{node.title}</h3></Link>
      <img src={node.heroImage.resize.src} />
      <div>{node.description.childMarkdownRemark.excerpt}</div>
    </li>
  )
}

const IndexPage = ({data}) => (
  <ul className='blog-post'>
    {data.allContentfulBlogPost.edges.map((edge) => <BlogPost node={edge.node} />)}
  </ul>
)

// const IndexPage = () => <Layout />;

export default IndexPage

export const pageQuery = graphql`
  query pageQuery {
    allContentfulBlogPost (filter: {
      node_locale: {eq: "en-US"}
    },
    sort:{ fields: [publishDate], order: DESC }
    ) {
      edges {
        node {
          title
          slug
          description {
            childMarkdownRemark {
              excerpt
            }
          }
          heroImage {
            resize(width: 300, height: 300) {
              src
            }
          }
        }
      }
    }
  }
`

注意：这有效，这显示了我的内容。 （但正如您所看到的那样，Quickstart中的组件等未包括在内）

这就是我的index.js现在的样子：

import React from 'react'

import Layout from '../components/layout';


const IndexPage = () => <Layout />;

export default IndexPage

这就是我的midsection.js现在的样子：

import React from 'react'
import { Link } from 'gatsby'

import './style.scss'

const BlogPost = ({node}) => {
  return (
    <li>
      <Link to={node.slug}><h3>{node.title}</h3></Link>
      <img src={node.heroImage.resize.src} />
      <div>{node.description.childMarkdownRemark.excerpt}</div>
    </li>
  )
}

const Midsection = ({data}) => (
  <ul className="blog-post">
    {data.allContentfulBlogPost.edges.map((edge) => <BlogPost node={edge.node} />)}
  </ul>
)

export default Midsection

export const pageQuery = graphql`
  query pageQuery {
    allContentfulBlogPost (filter: {
      node_locale: {eq: "en-US"}
    },
    sort:{ fields: [publishDate], order: DESC }
    ) {
      edges {
        node {
          title
          slug
          description {
            childMarkdownRemark {
              excerpt
            }
          }
          heroImage {
            resize(width: 300, height: 300) {
              src
            }
          }
        }
      }
    }
  }
`

使用这种将查询移动到组件的方式会在浏览器中出现此错误：TypeError: Cannot read property 'allContentfulBlogPost' of undefined

我希望在列中使用midsection.js组件来显示Contentful中可用的“博客帖子”。相反，这只能直接来自index.js。

是否有某种方式查询无法正常工作，因为我将它从根文件夹移动到组件文件夹？如果是这样，我需要做什么才能得到我想要的结果？

Answer 1

在一位同事的帮助下，我们通过以下步骤找到了解决方案：

将layout.js更改为：

import './style.scss'

const Layout = ({ children }) => children

export default Layout

将index.js更改为：

import React from 'react'
import Layout from '../components/layout';
import Helmet from '../components/helmet';
import Header from '../components/header';
import Midsection from '../components/midsection';
import Footer from '../components/footer';

const IndexPage = ({data}) => (
  <Layout>
    <Helmet />
    <Header />
    <Midsection posts={data.allContentfulBlogPost.edges}/>
    <Footer />
  </Layout>
)

export default IndexPage

export const pageQuery = graphql`
  query pageQuery {
    allContentfulBlogPost (filter: {
      node_locale: {eq: "en-US"}
    },
    sort:{ fields: [publishDate], order: DESC }
    ) {
      edges {
        node {
          title
          slug
          description {
            childMarkdownRemark {
              excerpt
            }
          }
          heroImage {
            resize(width: 300, height: 300) {
              src
            }
          }
        }
      }
    }
  }
`

将midsection.js更改为：

import React from 'react'
import Link from 'gatsby-link'
import './style.scss'

const BlogPost = ({node}) => {
  return (
    <li>
      <Link to={node.slug}><h3>{node.title}</h3></Link>
      <img src={node.heroImage.resize.src} />
      <div>{node.description.childMarkdownRemark.excerpt}</div>
    </li>
  )
}

const Midsection = ({ posts }) => (
  <ul className="blog-post">
    {posts.map(post => (
      <BlogPost key={post.node.slug} node={post.node} />
    ))}
  </ul>
)

export default Midsection

那问题是什么，解决了什么？

在这种情况下使用的查询是一个pageQuery，这意味着它只能在pages文件夹中找到的页面中使用。如果你想使用组件中的数据，你必须通过它:)