gatsby: gatsby-source-contentful rich text embedded entries are not resolved

Description

I’ve been working on using the rich text fields in gatsby and it seems that embedded entries are supposed to be resolved since this plugin uses the contentful SDK, but all I see is the id of the entry its supposed to resolve to.

Steps to reproduce

More info on what i’ve been doing here: https://github.com/contentful/rich-text/issues/46

Expected result

The JSON should have access to all fields of the entry. So for a link I should have things like the slug and title of the entry its linking to.

Actual result

I can only see the target.sys.id. Here’s an example of the JSON string returned:

"childContentfulRichText": {
          "internal": {
            "content": "{\"data\":{},\"content\":[{\"data\":{},\"content\":[{\"data\":{},\"content\":[{\"data\":{},\"content\":[{\"data\":{},\"marks\":[],\"value\":\"\",\"nodeType\":\"text\"},{\"data\":{\"target\":{\"sys\":{\"id\":\"c4nCwMtcqBGKOkc0kuyIQGW\",\"type\":\"Link\",\"linkType\":\"Entry\"}}},\"content\":[{\"data\":{},\"marks\":[],\"value\":\"Dialog\",\"nodeType\":\"text\"}],\"nodeType\":\"entry-hyperlink\"},{\"data\":{},\"marks\":[],\"value\":\"\",\"nodeType\":\"text\"}],\"nodeType\":\"paragraph\"}],\"nodeType\":\"list-item\"},{\"data\":{},\"content\":[{\"data\":{},\"content\":[{\"data\":{},\"marks\":[],\"value\":\"\",\"nodeType\":\"text\"},{\"data\":{\"target\":{\"sys\":{\"id\":\"q3YCW7wFmoW8MwOCG4Yoc\",\"type\":\"Link\",\"linkType\":\"Entry\"}}},\"content\":[{\"data\":{},\"marks\":[],\"value\":\"Link\",\"nodeType\":\"text\"}],\"nodeType\":\"entry-hyperlink\"},{\"data\":{},\"marks\":[],\"value\":\"\",\"nodeType\":\"text\"}],\"nodeType\":\"paragraph\"}],\"nodeType\":\"list-item\"}],\"nodeType\":\"unordered-list\"},{\"data\":{},\"content\":[{\"data\":{},\"marks\":[],\"value\":\"\",\"nodeType\":\"text\"}],\"nodeType\":\"paragraph\"}],\"nodeType\":\"document\"}"
          }

Environment

  System:
    OS: macOS 10.14
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.9.4 - ~/.nvm/versions/node/v8.9.4/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 6.5.0 - ~/.nvm/versions/node/v8.9.4/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 57.0.4
    Safari: 12.0
  npmPackages:
    gatsby: ^2.0.67 => 2.0.67 
    gatsby-image: ^2.0.25 => 2.0.25 
    gatsby-mdx: ^0.2.0 => 0.2.0 
    gatsby-plugin-sass: ^2.0.7 => 2.0.7 
    gatsby-plugin-sharp: ^2.0.15 => 2.0.15 
    gatsby-plugin-styled-components: ^3.0.4 => 3.0.4 
    gatsby-source-contentful: ^2.0.20 => 2.0.20 
    gatsby-transformer-sharp: ^2.1.9 => 2.1.9 
  npmGlobalPackages:
    gatsby-cli: 2.4.6

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 36 (12 by maintainers)

Most upvoted comments

For anyone coming here looking for a solution on how to get data all the time (not just on the first go), the above PR adds a handy option you can pass to your config.

{
  resolve: "gatsby-source-contentful",
    options: {
      forceFullSync: true
    }
}

https://www.gatsbyjs.org/packages/gatsby-source-contentful/#configuration-options

👨‍💻

So initial finding is that for some reason a lot of data is available on the first run (after deleting .cache directory): screenshot 2018-12-21 at 19 43 46

but after restarting all of that data goes away and we only have access to sys fields.

Removing the .cache directory seems to resolve this issue.

Thanks to @coreyward and @daydream05 for digging this up.

This issue should now be solved with the new canary version of gatsby-source-contentful

Please check the install & migration instructions at https://github.com/gatsbyjs/gatsby/pull/25249

I’d love to hear if this fixes your issues. The new way to render Rich Text should give you full flexibility and resolve data properly.

@pieh I did some digging and found a way to consistently reproduce this:

  1. Clear cache
  2. Start gatsby in develop
  3. Access content with a richtext field with embedded image via gatsby GQL. You get all data
    {
      "content": [],
      "data": {
        "target": {
          "fields": {
            "file": {
              "en-US": {
                "contentType": "image/png",
                "details": {
                  "image": {
                    "height": 965,
                    "width": 1680
                  },
                  "size": 378599
                },
                "fileName": "xxxxx.png",
                "url": "//images.ctfassets.net/xxxxx/xxxxx/xxxxx/xxxxx.png"
              }
            },
            "title": {
              "en-US": "xxxxx"
            }
          },
          "sys": {
            "createdAt": "2019-06-28T06:37:08.478Z",
            "environment": {
              "sys": {
                "id": "master",
                "linkType": "Environment",
                "type": "Link"
              }
            },
            "id": "xxxxx",
            "revision": 1,
            "space": {
              "sys": {
                "id": "xxxxx",
                "linkType": "Space",
                "type": "Link"
              }
            },
            "type": "Asset",
            "updatedAt": "2019-06-28T06:37:08.478Z"
          }
        }
      },
      "nodeType": "embedded-asset-block"
    }
    
  4. Change some content in contentful
  5. Restart gatsby develop
  6. Access content with a richtext field with embedded image via gatsby GQL. You only get minimal data
    {
      "data": {
        "target": {
          "sys": {
            "id": "xxxxx",
            "type": "Link",
            "linkType": "Asset"
          }
        }
      },
      "content": [],
      "nodeType": "embedded-asset-block"
    },
    

The problem is something with the sync in the contentful SDK. If I disable incremental sync (by manually setting the sync-token used to undefined) I always get the full information.

Side note: Updating to the latest contentful SDK version 7.x did not help.

A quick workaround would be to allow to configure gatsby-source-contentful to not use a sync token (but instead to always do a full sync).

We’re having a similar issue with Contentful Rich Text fields, although the issue is that nested embeds can be recursively linked to other embeds, ad infinitum. On running gatsby develop we are getting about 5GB of data back because we were getting the full content of every nested embed. Are there plans to configure how deep this nesting goes? Our system is currently broken because we’ve hit the upper bounds of memory on the server.

Was there a solution found for this? We cannot get INLINE or BLOCK.EMBEDDED_ENTRY instances to maintain their data in development/preview. The target property becomes an empty object. This obviously makes development a huge headache.

This issue is not present with BLOCKS.EMBEDDED_ASSET.

I’m reluctant to use forceFullSync because it seems there would be considerable performance issues with fully syncing every change in preview.

I put together a github repo that I think demonstrates this issue. I created a dummy contentful account, so both the space id and access token are in gatsby-config.js as plaintext.

When retrieving ‘blogPosts’ and accessing its ‘body’ rich text field, assets within have content field values of empty arrays. This url should open up the graphiql query automatically.

Let me know if I can be more helpful. I’m not as deep into this as everyone else but I would also like to find a solution. I don’t know otherwise how to get images in my blog posts.

@sarahbethfederman, Glad it works now, as I said if you still have a problem you can make a sample gatsby project and I can take care of the contentful side of things I will need to know the structure of the content. If the issue is solved for you now you can close this issue

Huh weird. Nested embedded entries seem to have started working again

Hey @sarahbethfederman, I would like to investigate the problem further with your help. How can we work together on getting a small project that replicates this issue? From there I can debug it and come up with a fix.