Fix Multiple Images

Bug Fix

When you added an image to an mdx post, the placeholder svg would still render even though the image loaded.

Adding gatsby-remark-images to the gatsby-mdx-plugin was the solution.

{
     resolve: `gatsby-plugin-mdx`,
     options: {
       extensions: ['.mdx', '.md', '.markdown'],
       gatsbyRemarkPlugins: [
         {
           resolve: 'gatsby-remark-images',
           options: {
             backgroundColor: '#fafafa',
             maxWidth: 1035,
           },
         },
       ],
     },
   },

Thanks @Creeland.

Update Blog page allMdx query

This adds isPost to any mdx node:

// gatsby-node.js
createNodeField({
      name: 'isPost',
      node,
      value: true,
    })

Update the page query in src/templates/blog.js

//...
allMdx(
      sort: { fields: [frontmatter___date], order: DESC }
      filter: { fields: { isPost: { eq: true } } }
    )
//...

This allows us to remove:

parent {	
    ... on File {	
     sourceInstanceName	
    }	
}

Upgrade MDX to v1.0

Update dependencies

"@emotion/core": "^10.0.5" -> "^10.0.10"
"@emotion/styled": "^10.0.5" -> "^10.0.10"
"@mdx-js/mdx": "^0.16.6" -> "^1.0.19"
"@mdx-js/tag": "^0.16.6" -> "^1.0.16"
"gatsby-mdx": "^0.3.4" -> "^0.6.3"

Update dev dependencies

babel-preset-gatsby: "^0.1.6" -> "^0.1.11"
gatsby: "^2.2.5" -> "^2.4.6"
prettier": "1.14.3" -> "1.17.1"
react": "^16.8.0" -> "^16.8.6"
react-dom": "^16.8.0" -> "^16.8.6"