每次更改博客条目时，` `gatsby develop`都会崩溃

Question

使用Flexible Gatsby starter (https://github.com/wangonya/flexible-gatsby/)，Gatsby依赖项的确切版本为：

    "gatsby": "2.15.36",
    "gatsby-image": "2.2.27",
    "gatsby-plugin-feed": "2.3.15",
    "gatsby-plugin-google-analytics": "2.1.20",
    "gatsby-plugin-manifest": "2.2.20",
    "gatsby-plugin-offline": "3.0.12",
    "gatsby-plugin-react-helmet": "3.1.10",
    "gatsby-plugin-sass": "2.1.17",
    "gatsby-plugin-sharp": "2.2.28",
    "gatsby-remark-images": "3.1.25",
    "gatsby-remark-prismjs": "3.3.17",
    "gatsby-source-filesystem": "2.1.30",
    "gatsby-transformer-remark": "2.6.27",
    "gatsby-transformer-sharp": "2.2.20",

我可以运行gatsby develop来监视文件夹中用于刷新UI更改等内容的文件。但是，一旦我在content/blog中保存对任何文件的任何更改，develop就会遇到以下错误：

info added file at /Users/mattsi/dev/me/newsite/gatsby/content/blog/conference-on-javascript/index.md

 ERROR #11321  PLUGIN

"gatsby-node.js" threw an error while running the createPages lifecycle:

The "path" argument must be of type string. Received type undefined

GraphQL request:14:17
13 |                 title
14 |                 img {
   |                 ^
15 |                   childImageSharp {

在此之后，本地服务器返回一个错误页面，指出TypeError: Cannot read property 'page' of undefined和一个指向rootjs:44的堆栈跟踪。如果我关闭手表并再次执行gatsby develop，它工作得很好。但是这个反馈循环显然要慢得多。

我的Gatsby配置(...省略了一些细节)：

module.exports = {
  siteMetadata: {
    title: `...`,
    description: `...`,
    author: `...`,
    siteUrl: `...`,
    social: {
      twitter: `...`,
      facebook: ``,
      github: `...`,
      linkedin: `...`,
      email: `...`,
    },
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`,
        name: `blog`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/assets`,
        name: `assets`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 970,
            },
          },
          `gatsby-remark-prismjs`,
        ],
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        //trackingId: `ADD YOUR TRACKING ID HERE`,
      },
    },
    `gatsby-plugin-feed`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `...`,
        short_name: `...`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `./static/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    // `gatsby-plugin-offline`,
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-sass`,
  ],
}

我的gatsby-node.js文件：

const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions

  const blogPost = path.resolve(`./src/templates/blog-post.js`)
  return graphql(
    `
      {
        allMarkdownRemark(
          sort: { fields: [frontmatter___date], order: DESC }
          limit: 1000
        ) {
          edges {
            node {
              fields {
                slug
              }
              frontmatter {
                title
                img {
                  childImageSharp {
                    fluid(maxWidth: 3720) {
                      aspectRatio
                      base64
                      sizes
                      src
                      srcSet
                    }
                  }
                }
              }
            }
          }
        }
      }
    `
  ).then(result => {
    if (result.errors) {
      throw result.errors
    }

    // Create blog posts pages.
    const posts = result.data.allMarkdownRemark.edges

    posts.forEach((post, index) => {
      const previous = index === posts.length - 1 ? null : posts[index + 1].node
      const next = index === 0 ? null : posts[index - 1].node

      createPage({
        path: post.node.fields.slug,
        component: blogPost,
        context: {
          slug: post.node.fields.slug,
          previous,
          next,
        },
      })
    })

    // Create blog post list pages
    const postsPerPage = 10
    const numPages = Math.ceil(posts.length / postsPerPage)

    Array.from({ length: numPages }).forEach((_, i) => {
      createPage({
        path: i === 0 ? `/` : `/${i + 1}`,
        component: path.resolve("./src/templates/blog-list.js"),
        context: {
          limit: postsPerPage,
          skip: i * postsPerPage,
          numPages,
          currentPage: i + 1,
        },
      })
    })
  })
}

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

查看堆栈跟踪，似乎来自allMarkdownRemark GraphQL DB的修改后的post上的post.node.fields.slug字段返回为undefined。但是使用内置的GraphQL浏览器，它似乎总是被填充。也许它在刷新时非常短暂地无人居住，比我能捕捉到的更快，这会导致手表崩溃吗？有什么办法可以修复Gatsby的手表功能吗？

Answer 1

我也有这个问题，我相信this PR会解决这个问题--至少对我来说是这样。也许你可以对它进行测试，如果它对你有帮助的话，你可以对PR发表评论。