(gatsby-transformer-remark): Cache - transform changes are not refreshed if content isn't changed

Description

When using gatsby-remark-embed-snippet (or any other plugin that read other file as remark transform) changes are not shown. Not even after restart. I have to clean the cache or change the related md file where I want to see these changes.

Steps to reproduce

Small project: https://github.com/majcn/gatsby-snippet-cache-issue

• start in develop mode and change content/blog/page/embed.js

Expected result

Changes are shown in the browser (http://localhost:8000/page/).

Actual result

Changes are not shown in the browser (http://localhost:8000/page/). Even after the restart. I had to execute gatsby clean

Environment

    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.8.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.7 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 84.0.4147.135
    Safari: 13.1.2
  npmPackages:
    gatsby: ^2.24.47 => 2.24.47
    gatsby-image: ^2.4.16 => 2.4.16
    gatsby-plugin-feed: ^2.5.11 => 2.5.11
    gatsby-plugin-google-analytics: ^2.3.13 => 2.3.13
    gatsby-plugin-manifest: ^2.4.23 => 2.4.23
    gatsby-plugin-offline: ^3.2.23 => 3.2.23
    gatsby-plugin-react-helmet: ^3.3.10 => 3.3.10
    gatsby-plugin-sharp: ^2.6.27 => 2.6.27
    gatsby-plugin-typography: ^2.5.10 => 2.5.10
    gatsby-remark-copy-linked-files: ^2.3.12 => 2.3.12
    gatsby-remark-embed-snippet: ^4.3.14 => 4.3.14
    gatsby-remark-images: ^3.3.25 => 3.3.25
    gatsby-remark-prismjs: ^3.5.10 => 3.5.10
    gatsby-remark-responsive-iframe: ^2.4.12 => 2.4.12
    gatsby-remark-smartypants: ^2.3.10 => 2.3.10
    gatsby-source-filesystem: ^2.3.24 => 2.3.24
    gatsby-transformer-remark: ^2.8.28 => 2.8.28
    gatsby-transformer-sharp: ^2.5.13 => 2.5.13

[r002]

I’m currently working on a fork of the reactjs documentation and just encountered this issue tonight as well. This is my first experience ever with Gatsby and GraphQL and it was frustrating to trip over this! A poor and unfriendly first encounter! ☹ It feels like the framework is trying to be too clever by half and is failing. 🤦‍♂️😤

For now, I’ve just copy/pasted the js snippet I’m trying to embed into the actual source .md file I’m embedding from, am editing everything there in the .md file (so my hot reloading works) until I’m satisfied with my changes, and then am cut/pasting back out into the snippet .js file.

Is there some option I can set somewhere to just turn off this “GraphQL/caching” data layer? Basically like @RomanHotsiy said, I want to force the transformer to always rerun and grab the contents in the embed every time its parent .md re-renders.

[ascorbic]

Some notes after initial investigation:

• Changing the embedded js file does trigger a rebuild, but the content of the page data is unchanged.
• Editing the enclosing .md file then causes a rebuild, which includes the updated version of the .js file
• Changing the .md file back to the original version causes the page to revert to the stale version of the embed too.
• The issue also occurs if the embedded file is HTML too