Gatsby-内容丰富的网站:本地环境没有吸引内容更新？

Question

因此，我有一个盖茨比网站，我使用Netlify作为部署和内容为我的CMS。开发网站上的一切都进行得很好，直到我删除并取消了康滕福上的几篇文章。之后，当我启动我的dev服务器时，我得到了一个错误：

​

​

我想这可能是因为当地的网站试图吸引不再存在的帖子？所以，我删除了.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 )，或者使字段满足( Contentful )。