Description
Images seen in markdown are not actually registered as node dependencies for the given page. This PR does two things to solve this:
1. passes a getRemarkFileDependency function from gatsby-transformer-remark down to gatsby-remark-images which uses the [findOne](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/schema/node-model.js#L365) query instead, which registers a dependency to the markdown node internally.
2. Sets up a dependency tracking layer for gatsby-transformer-remark that, when a change is detected from the bullet point above, allows the transformer to check if any dependencies of the markdown node has changed (by comparing contentDigests from what they were previously)
This change is also backwards compatible both ways. If gatsby-transformer-remark is not up to date, it will not pass getRemarkFileDependency and gatsby-remark-images will use the old method. If gatsby-remark-images is not up to date, it will ignore the passed getRemarkFileDependency and continue with the old method.
Documentation
No documentation updates should be needed, as the external contract hasn't changed.
Testing
There's one unit test to validate that the gatsby-remark-images plugin calls the passed function and generates the expected result. I also added an e2e snapshot test for development that will check if the image updates properly.
If you'd like to validate this locally:
- Pull this PR
- Create a new gatsby blog: gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog
- Run yarn watch --scope={gatsby,gatsby-transformer-remark,gatsby-remark-images} in your gatsby repo
- Run gatsby-dev in your blog site
- Run gatsby-develop in your blog site
- Visit http://localhost:8000/hello-world/
- Change the salty_egg.jpg image
- See a build happening and the image in your browser update automatically
Related Issues
[sc-35770]