file node (created by createRemoteFileNode) lost after rebuilding during 'gatsby develop'

[StinsonZhao]

Description

I use createRemoteFileNode for Preprocessing External Images, and I follow this document: https://www.gatsbyjs.org/docs/preprocessing-external-images/

Everything is OK. But during developing, I found that the 'file node' would be missing if I removed some pictures in *.md

Steps to reproduce

I use the gatsby-starter-blog for reproducing it.

• gatsby new gatsby-starter-blog https://github.com/gatsbyjs/gatsby-starter-blog

• modify a post(*.md) with a illustration frontmatter

// content/blog/hello-world/index.md
  ---
  title: Hello World
  date: "2015-05-01T22:12:03.284Z"
  description: "Hello World"
+ illustration: https://image.freepik.com/free-photo/scottish-fold-cat-blue-surface_23-2148181678.jpg
  ---

• modify gatsby-node.js, use createRemoteFileNode

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

... ...

exports.onCreateNode = async ({ node, actions, getNode, createNodeId, cache, store }) => {
  const { createNodeField, createNode } = actions

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

    const { illustration } = node.frontmatter

    if (illustration) {
      const fileNode = await createRemoteFileNode({
        url: illustration,
        parentNodeId: node.id,
        createNode,
        createNodeId,
        cache,
        store,
      })

      if (fileNode) {
        node.illustration___NODE = fileNode.id
      }
    }
  }
}

• modify template blog-post.js, add illustration before the whole article.

const BlogPostTemplate = ({ data, pageContext, location }) => {
  const post = data.markdownRemark
  const siteTitle = data.site.siteMetadata.title
  const { previous, next } = pageContext

  const {
    markdownRemark: {
      illustration,
    },
  } = data

  return (
    <Layout location={location} title={siteTitle}>
      <SEO
        title={post.frontmatter.title}
        description={post.frontmatter.description || post.excerpt}
      />

      {illustration && (
        <Img
          fluid={illustration.childImageSharp.fluid}
          alt="test img"
        />
      )}

      <article>
        <header>

       ... ...


export const query = graphql`
  query DefaultTemplateQuery($slug: String!) {

    ... ...

    mdx(fields: { slug: { eq: $slug } }) {
      body
      excerpt
      tableOfContents
      frontmatter {
        id
        title
        description
        illustration
        toc
        illustrationAlt
      }
      illustration {
        childImageSharp {
          fluid(maxWidth: 720, quality: 100) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  }
`

• run yarn run develop. Everything is OK

• Modify something in markdown, maybe delete some words, then cmd+s to save

• Gatsby will rebuild and live reload by itself, and an error is thrown. And in GraphiQL, I can not get the illustration node

• So, I have to re-run gatsby develop. And once I changed the pictures in .md, I have to re-run gatsby develop, that's annoying.

Expected result

No error. I can develop with remote images normally

Actual result

Error happened.

Environment

  System:
    OS: macOS 10.15.3
    CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.16.1 - /usr/local/bin/node
    Yarn: 1.19.2 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
  Languages:
    Python: 2.7.15 - /usr/local/bin/python
  Browsers:
    Chrome: 80.0.3987.132
    Firefox: 71.0
    Safari: 13.0.5
  npmPackages:
    gatsby: ^2.19.7 => 2.19.7 
    gatsby-image: ^2.2.39 => 2.2.39 
    gatsby-plugin-feed: ^2.3.26 => 2.3.26 
    gatsby-plugin-google-analytics: ^2.1.34 => 2.1.34 
    gatsby-plugin-manifest: ^2.2.39 => 2.2.39 
    gatsby-plugin-offline: ^3.0.32 => 3.0.32 
    gatsby-plugin-react-helmet: ^3.1.21 => 3.1.21 
    gatsby-plugin-sharp: ^2.4.3 => 2.4.3 
    gatsby-plugin-typography: ^2.3.21 => 2.3.21 
    gatsby-remark-copy-linked-files: ^2.1.36 => 2.1.36 
    gatsby-remark-images: ^3.1.42 => 3.1.42 
    gatsby-remark-prismjs: ^3.3.30 => 3.3.30 
    gatsby-remark-responsive-iframe: ^2.2.31 => 2.2.31 
    gatsby-remark-smartypants: ^2.1.20 => 2.1.20 
    gatsby-source-filesystem: ^2.1.46 => 2.1.46 
    gatsby-transformer-remark: ^2.6.48 => 2.6.48 
    gatsby-transformer-sharp: ^2.3.13 => 2.3.13 
  npmGlobalPackages:
    gatsby-cli: 2.8.30
    gatsby: 2.18.3

[StinsonZhao]

And if I use createSchemaCustomization for optional illustration

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions
  createTypes(`
    type MarkdownRemark implements Node {
      frontmatter: Frontmatter
      illustration: File
    }
    type Frontmatter {
      title: String!
      illustration: String
    }
  `)
}

The error will disappear, but I still can not get the illustration. I will get illustration is null in GraphQL

[StinsonZhao]

😝 I got it.

In this doc: https://www.gatsbyjs.org/docs/schema-customization/#foreign-key-fields

Note that when using createTypes to fix type inference for a foreign-key field created by a plugin, the underlying data will probably live on a field with a ___NODE suffix. Use the from argument to point the link extension to the correct field name. For example: author: [AuthorJson] @link(from: "author___NODE")

So, I followed this and modified the createTypes in gatsby-node.js:

  exports.createSchemaCustomization = ({ actions }) => {
    const { createTypes } = actions

    createTypes(`
      type MarkdownRemark implements Node {
        frontmatter: Frontmatter
-       illustration: File
+       illustration: File @link(from: "illustration___NODE")
      }
      type Frontmatter {
        title: String
        illustration: String
      }
    `)
  }

Then the problem was solved.

I think this doc Preprocessing External Images should be updated.

[LekoArts]

We'd gladly accept a PR from you fixing the docs! :)