Embedded content breaks Gatsby hot reloading

[thompsonsj]

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 #61 (comment).

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. gatsby-transformer-contentful-richtext use with React? #46 (comment)

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: gatsbyjs/gatsby#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 #53.

The .cache workaround is mentioned multiple times:

• Embedded images are ignored #61 (comment)
• gatsby-source-contentful rich text embedded entries are not resolved gatsbyjs/gatsby#10592 (comment)
• gatsby-transformer-contentful-richtext use with React? #46 (comment)

--

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? #46 (comment) suggests this behaviour is intentional, but this issue breaks hot reloading and Gatsby Preview.

[Khaledgarbaya]

Hey @thompsonsj,
This issue is related to the source plugin and the way it is pulling the data. I think we should change that. Instead of progressive sync we always should do initial sync to get all the data

[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.

[Khaledgarbaya]

Hey @DSchau we currently discussing whether we change the way the source plugin is pulling content from contentful, instead of progressive sync we always do an initial sync.
I think we'll end up doing initial sync always to make sure that all the data is present all the time for the SDK to do the link resolution

[Khaledgarbaya]

I started a WIP PR to fix the issue and explained more what is happening.

[disintegrator]

Oh thank goodness this is being addressed. We are concerned that a full sync of our content will slow down our build and Gatsby Preview processes as time goes on and there's more content in Contentful (we are ramping up quickly). The only workaround we have now is to configure gatsby-source-contentful with forceFullSync: true

[KnisterPeter]

@Khaledgarbaya @DSchau Any update on this?

[DSchau]

Hi @KnisterPeter -- please check out @Khaledgarbaya's reply here: gatsbyjs/gatsby#15084 (comment)