Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(gatsby-remark-images): regenerate markdown when used image changes #34433

Merged
merged 16 commits into from
Jan 18, 2022

Conversation

imjoshin
Copy link
Contributor

@imjoshin imjoshin commented Jan 9, 2022

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]

@gatsbot gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Jan 9, 2022
@LekoArts LekoArts added topic: remark/mdx Related to Markdown, remark & MDX ecosystem and removed status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer labels Jan 11, 2022
@imjoshin imjoshin changed the title WIP: fix(gatsby): Fix no change seen in gatsby-transformer-remark/gatsby-remark-images integration when an image dependency changes Jan 13, 2022
@imjoshin imjoshin changed the base branch from master to addActionsType January 18, 2022 20:09
@imjoshin imjoshin changed the base branch from addActionsType to master January 18, 2022 20:09
@pieh pieh changed the title fix(gatsby): Fix no change seen in gatsby-transformer-remark/gatsby-remark-images integration when an image dependency changes Jan 18, 2022
Copy link
Contributor

@pieh pieh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you so much for this!

@pieh pieh merged commit 3954944 into gatsbyjs:master Jan 18, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
topic: remark/mdx Related to Markdown, remark & MDX ecosystem
3 participants