Embedded content breaks Gatsby hot reloading

If any custom renderers are defined for the Contentful rich text type, gatsby develop breaks unless the .cache folder is cleared before running gatsby develop again. If .cache is not cleared, the GraphQL query stops returning fields.

{
  "nodeType": "embedded-asset-block",
  "content": [],
  "data": {
    "target": {
        //
      },
      "fields": {
        // This object is lost on refresh
      }
    }
  }
}

In other words, gatsby develop loses references to embedded content on refresh

In my case, I am using @contentful/rich-text-react-renderer to render content, but I believe this may be an issue with https://github.com/contentful/rich-text in general.

Why its important

Defining custom renderers is the only way to render embedded assets and blocks.

For example, if you embed an image in a rich text field, you’ll need to define a custom renderer to display it. This is intentional - Contentful does not hold any opinions over how content should be rendered. See https://github.com/contentful/rich-text/issues/61#issuecomment-475986791.

This behaviour is reasonable. For example, Contentful would have no idea how to render an embedded content type.

If gatsby develop is unable to reference embedded content on refresh:

• We lose hot reloading.
• Gatsby Preview cannot be used with rich text embedded content.
• Workarounds lead to long reload times. e.g. https://github.com/contentful/rich-text/issues/46#issuecomment-452825310

Related issues

This is not a new issue, but related issues have either diverged or been closed without resolution.

This issue was identified in #46 for gatsby-transformer-contentful-richtext, but was closed without resolution due to the plugin being deprecated. However, as identifed here, the issue carries forward into @contentful/rich-text-react-renderer and likely @contentful/rich-text.

Related to #46, this same issue was created in the Gatsby repo: https://github.com/gatsbyjs/gatsby/issues/10592. However, that issue morphed into a talking about running out of memory, and the issue was closed as having resolved the memory issue. For reference, the memory issue is defined in https://github.com/contentful/rich-text/issues/53.

The .cache workaround is mentioned multiple times:

• https://github.com/contentful/rich-text/issues/61#issuecomment-485001395
• https://github.com/gatsbyjs/gatsby/issues/10592#issuecomment-449467423
• https://github.com/contentful/rich-text/issues/46#issuecomment-450829857

–

Thanks to @sarahbethfederman and @polarathene for working so hard on the issue up to this point.

@Khaledgarbaya, is this something that can be looked at? https://github.com/contentful/rich-text/issues/46#issuecomment-451085235 suggests this behaviour is intentional, but this issue breaks hot reloading and Gatsby Preview.

[Khaledgarbaya]

Hey @thompsonsj, We discussed this with the team and it’s our backlog to fix asap. I will let you know when this is fixed

[DSchau]

@Khaledgarbaya any status updates on the progress of getting this fixed?

This is pretty impactful to all Gatsby users and RichText users, but especially in a Gatsby Cloud context, as well. It breaks hot-reloading and user’s applications.

If it’s helpful, I’ve put together a reproduction. I’m happy to hand over access to my Contentful instance (and provide access tokens) but here’s how it breaks:

1. Run gatsby clean to clear cache and public directories
2. Run gatsby develop to launch Gatsby develop process
3. Change a piece of content in Contentful that has RichText functionality
4. Re-run the develop server; breaks!

The why is that the json body that is returned only has a subset of data that’s required, as we’re well aware.