Не удается прочитать свойство 'allContentfulBlogPost' undefined "после перемещения запроса из index.js в компонент в GatsbyJS (с Contenful и GraphQL)

Question

Перемещение запроса с index.js на midsection.js (компонент) дает Cannot read свойство undefined.

Я создал сайт с 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)), сравнить его с моим собственным веб-сайтом и использовать что мне нужно.

Я решил использовать структуру компонентов, используемую в быстром запуске, и хотел переместить запрос для получения моего контента с 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, что означает, что он работает только со страниц, найденных в папке страниц.Если вы хотите использовать данные в компоненте, вы должны передать их :)