Gatsby-Contentful网站：本地环境未提取Contentful更新？

Question

所以，我有一个Gatsby网站，我正在使用Netlify进行部署，而Contentful用于我的CMS。在开发站点上一切正常，直到我删除和取消发布了Contenful上的几篇帖子。之后，当我启动开发服务器时，出现错误：

我以为这可能是因为本地站点试图提取不再存在的帖子？因此，我删除了.cache和公用文件夹，以查看是否可行，但没有成功。所以，我有点受困。生产现场工作正常。

关于可能发生的事情有什么想法吗？

index.js

import React from 'react'
import { Link, graphql } from 'gatsby'
import Layout from '../components/Layout'
import Helmet from 'react-helmet'
import Container from '../components/Container'
import Pagination from '../components/Pagination'
import SEO from '../components/SEO'
import config from '../utils/siteConfig'
import FeaturedHero from '../components/FeaturedHero'
import MasonryGrid from '../components/MasonryGrid'

const Index = ({ data, pageContext }) => {
  const posts = data.allContentfulPost.edges
  const featuredPost = posts[0].node
  const { currentPage } = pageContext
  const isFirstPage = currentPage === 1

  const breakpointCols = {
    default: 3,
    1100: 2,
    700: 1,
    500: 1
  };

  return (
    <Layout>
      <SEO />
      {!isFirstPage && (
        <Helmet>
          <title>{`${config.siteTitle} - Page ${currentPage}`}</title>
        </Helmet>
      )}

      <FeaturedHero title={featuredPost.title} image={featuredPost.heroImage} height={'80vh'} {...featuredPost} />

      <Container>
          <MasonryGrid posts={posts} />
      </Container>
    </Layout>
  )
}

export const query = graphql`
  query {
    allContentfulPost(
      sort: { fields: [publishDate], order: DESC }
    ) {
      edges {
        node {
          title
          id
          slug
          publishDate(formatString: "MMMM DD, YYYY")
          heroImage {
            title
            fluid(maxWidth: 1800) {
              ...GatsbyContentfulFluid_withWebp
            }
          }
          metaDescription {
            internal {
              content
            }
            metaDescription
          }
          body {
            childMarkdownRemark {
              html
            }
          }
        }
      }
    }
  }
`

export default Index

components / MasonryGrid.js

import React from 'react'
import styled from 'styled-components'
import Masonry from 'react-masonry-css'
import Img from 'gatsby-image'
import {Link} from 'gatsby'


const MasonryGrid = ({posts}) => {
  const breakpointCols = {
    default: 3,
    1100: 2,
    700: 1,
    500: 1
  };

  return (
    <Masonry
      breakpointCols={breakpointCols}
      className="my-masonry-grid"
      columnClassName="my-masonry-grid_column">
      {posts.map(({ node: post }) => (
        <div className="masonry-grid-item">
          <Link to={`/${post.slug}/`}>
            <Img
              fluid={post.heroImage.fluid}
            />
          </Link>
          <div className="text-wrap">
            <Link to={`/${post.slug}/`}>
              <h4 className="title is-4 is-spaced">{post.title}</h4>
            </Link>
            <p className="subtitle is-6 is-spaced">{post.metaDescription.metaDescription}</p>
          </div>
        </div>
      ))}
    </Masonry>
  )
}

export default MasonryGrid

Answer 1

好像您有一些帖子没有heroImage字段。当您查询没有一个帖子的heroImage字段时，该字段为null。

例如，如果<Img>，您可以添加仅显示heroImage !== null的支票，或者使内容为必填字段。