Gatsby-Contentful 网站：本地环境没有引入 Contentful 更新？

Question

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

我认为这可能是因为本地网站试图拉入不再存在的帖子？所以，我删除了 .cache 和 public 文件夹，看看这是否可行，但它没有。所以，我有点难过。生产现场运行良好。

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

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。

例如，您可以添加检查以仅在 heroImage !== null 时呈现 <Img> 或在 Contentful 中设置必填字段。