Q:

Gatsby-Contentful site: Local environment not pulling in Contentful updates?

So, I have a Gatsby site that I'm using Netlify for deployment and Contentful for my CMS. Everything was working fine on the development site until I deleted and unpublished a couple posts on Contenful. After that, when I started up my dev server I got an error:

I thought maybe this happening because the local site trying to pull in posts that didn't exist anymore? So, I deleted the .cache and public folder to see if that would work but it didn't. So, I'm a kind of stumped. The production site works fine.
Any ideas on what could be happening?
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

A:

Looks like you have some posts which do not have a heroImage field. When you query the heroImage field on a post which does not have one, that field is null.
You can for example add a check to only render the <Img> if heroImage !== null or make the field required in Contentful.

