fix(gatsby-source-contentful): fix missing data with rich text fields

[Khaledgarbaya]

Description

This PRs is an attempt to fix missing data on content changes at contentful.
the gatsby-source-plugin is using the Contentful SDK which is calling the sync API behind the scene for the first sync the SDK will have all the data available to it so it can perform the link resolution however in the subsequent sync the API will return only the changed entries which is not enough data for the SDK to do the link resolution.

Solution

By saving the previous sync data and using it later to do link resolution we make sure that all links are resolved

Related Issues

• Embedded content breaks Gatsby hot reloading contentful/rich-text#94

TODO

• Add tests existing tests should do

[DSchau]

Awesome @Khaledgarbaya! I'll pull this down and see if I'm able to fix any issues.

Thanks for prioritizing this--it's been a sore spot for some users so super excited to get this fix in as soon as possible!

[FLoppix]

Thanks for the fast help and response ! @DSchau and @Khaledgarbaya. Super pumped when this is fixed and let me know when I can test it or you need help / reproduction cases!

[Khaledgarbaya]

Sorry closed the PR by mistake.
@DSchau and @FLoppix I think you can test with this change and let me know.
I might have some more time tomorrow to write some tests

[pieh]

I've published gatsby-source-contentful@rich-text-resolve to make it easier to test

[FLoppix]

I grabbed the package from @pieh and it still giving me not all the updated values.
I described it here in more detail #14918

[Khaledgarbaya]

Hey @FLoppix Thanks for trying this out. @DSchau any chance I can get the space id and api key for the reproduction space?

[Khaledgarbaya]

Hey @FLoppix and @DSchau I think my last change did fix the issue would you mind give it another try.

[DSchau]

@Khaledgarbaya sorry - missed this! I’ll DM you on Twitter in 5.

[FLoppix]

@Khaledgarbaya Your fix is working for me :)
Thank you so much ! This will help me a lot

[odorisioe]

Hi @Khaledgarbaya, 2.1.2-rich-text-resolve.18 solves the hot reloading issue for me (thanks for that!), so I will wait for the merge.

However, I would like to check about an issue with entries included on rich text that could be introduced with this fix. I am not sure if it exists before cause I was not able to see rich text data because the error.

If I update an entry included on a rich text, the hot reload update the entry but does not update the json where it is included.

Example:
I created a content type Page with a rich text called "body" where I can embed VideoBlock entries.
If I update an VideoBlock entry, the reload works and updates the new values on Gatsby but the json still have old values. Only when I update a field on Page (like "title") the json is generated again.

[Khaledgarbaya]

Hi @odorisioe,
Thanks for the test would you mind making a small video about the issue so I can look at it.

[odorisioe]

Hi @Khaledgarbaya I will try to create a video soon but these are the steps to reproduce the error

Steps

1. (On Contentful) Create two content types
   Page
   . title (field type: string)
   . content (field type: rich text - allow to embed VideoBlock entries)
   VideoBlock
   . url (type: string)
   . caption (type: string)

2. (On Contentful) Create a Page entry and add a title

3. (On Contentful) Embed a VideoBlock on the field content of the Page created on step 2.

4. (On Gatsby) Run "gatsby develop" with ENABLE_GATSBY_REFRESH_ENDPOINT=true

5. (On Gatsby) Go to /__graphql and query by id the Page and the VideoBlock. The values are sync with Contentful.

# Get created page by id - include the rich text as json
query PageByIdQuery($id: String!) {
  contentfulPage(id: { eq: $id }) {
    id
    content {
      json
    }
  }
}

# Get video block by id (the one embedded on the rich text)
query VideoBlockByIdQuery($id: String!) {
  contentfulVideoBlock(id: { eq: $id }) {
    id
    url
    caption
  }
}

6. (On Contentful) Update values on the VideoBlock - url and/or caption fields

7. (On Gatsbty) Do a POST request to /__refresh and the VideoBlock entry will be updated locally.

Refreshing source data
Starting to fetch data from Contentful
Fetching default locale
default locale is : en-US
contentTypes fetched 12
Updated entries  1
Deleted entries  0
Updated assets  0
Deleted assets  0
Fetch Contentful data: 3245.120ms

8. (On Gatsby) Repeat the same queries as the step 5 and compare the values of the VideoBlock.

Result

VideoBlockByIdQuery includes the updated values added on step 6.
But the rich-text json on PageByIdQuery includes the VideoBlock with the previous values

Do POST request to /__refresh do not regenerate the rich-text json.
Unless I make a change on the Page entry like edit the title. Then on next hot reloading, the json will be generated with the right values

[Khaledgarbaya]

Hey @pieh @DSchau is it possible to release a new version of this to npm so people can play around with it more.

[DSchau]

@Khaledgarbaya for sure. I'll do that today!

[DSchau]

Successfully published:

• gatsby-source-contentful@2.1.5-rich-text-resolve.19+787dd4b9f

Install with

npm i gatsby-source-contentful@rich-text-resolve

[phoebeschmidt]

usage of Cf SDK looks 👍 to me! very excited this is being fixed :)

[Khaledgarbaya]

LGTM, Thanks for picking this up

[axe312ger]

Thanks @phoebeschmidt & @Khaledgarbaya

So lets continue for #24905