[gatsby-source-contentful] Missing content in rich text fields

[oherterich]

Summary

The gatsby-source-contentful plugin does not return correct data for the rich text field type in Contentful.

Specifically, it only returns the text fields, and not any embedded content. The embedded content is represented by an empty array, instead of a real value.

After using the allContentful*** GraphQL query, the following is returned for the post field, which is the rich text field:

            "post": {
              "content": [
                {
                  "content": [
                    {
                      "value": "The filmmaking process begins long before the cameras start rolling, but that is where our journey starts, as we chart the factors and decisions that you will need to make throughout the post-production process.",
                      "nodeType": "text"
                    }
                  ]
                },
                {
                  "content": [
                    {
                      "value": "These days, post-production begins the moment that cameras start rolling.",
                      "nodeType": "text"
                    }
                  ]
                },
                {
                  "content": []
                },
                {
                  "content": []
                },
                {
                  "content": [
                    {
                      "value": "",
                      "nodeType": "text"
                    }
                  ]
                }
              ]
            }

The empty "content" arrays are where the embedded content is located.

Am I doing something wrong here? Is there a different way to see this content?

Relevant information

This Gatsby project is based from the gatsby-starter-gcn starter, and not modified at all.

I added an environment variable to .env.development file, as indicated here: https://github.com/ryanwiemer/gatsby-starter-gcn

Environment (if relevant)

File contents (if changed)

gatsby-config.js: N/A
package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[kakadiadarpan]

@oherterich please provide the relevant environment information by running gatsby info --clipboard in your Gatsby project directory and paste its contents here.

I understand that your project is based on the gatsby-starter-gcn starter, but it's important for us to know the package versions that you are using.

[oherterich]

@kakadiadarpan Done! Result is below:

  System:
    OS: macOS 10.14
    CPU: x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.12.0 - ~/.nvm/versions/node/v8.12.0/bin/node
    npm: 6.4.1 - ~/.nvm/versions/node/v8.12.0/bin/npm
  Browsers:
    Chrome: 70.0.3538.77
    Firefox: 63.0
    Safari: 12.0
  npmPackages:
    gatsby: ^2.0.29 => 2.0.29 
    gatsby-image: ^2.0.16 => 2.0.16 
    gatsby-plugin-canonical-urls: ^2.0.6 => 2.0.6 
    gatsby-plugin-catch-links: ^2.0.5 => 2.0.5 
    gatsby-plugin-feed: ^2.0.8 => 2.0.8 
    gatsby-plugin-google-analytics: ^2.0.6 => 2.0.6 
    gatsby-plugin-manifest: ^2.0.5 => 2.0.5 
    gatsby-plugin-netlify: ^2.0.2 => 2.0.2 
    gatsby-plugin-nprogress: ^2.0.5 => 2.0.5 
    gatsby-plugin-offline: ^2.0.8 => 2.0.8 
    gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0 
    gatsby-plugin-sitemap: ^2.0.1 => 2.0.1 
    gatsby-plugin-styled-components: ^3.0.0 => 3.0.0 
    gatsby-remark-autolink-headers: ^2.0.8 => 2.0.8 
    gatsby-remark-images-contentful: ^2.0.2 => 2.0.2 
    gatsby-remark-prismjs: ^3.0.2 => 3.0.2 
    gatsby-source-contentful: ^2.0.5 => 2.0.5 
    gatsby-source-filesystem: ^2.0.5 => 2.0.5 
    gatsby-transformer-remark: ^2.1.8 => 2.1.8 
  npmGlobalPackages:
    gatsby-cli: 2.4.1

[danrosenthal]

I believe I'm experiencing the same issue. My query for an embedded asset also returns an empty content array.

query results

Here's my info:

  System:
    OS: macOS 10.14
    CPU: x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Shell: 4.4.12 - /usr/local/bin/bash
  Binaries:
    Node: 8.9.4 - ~/.nvm/versions/node/v8.9.4/bin/node
    Yarn: 1.10.1 - /usr/local/bin/yarn
    npm: 5.6.0 - ~/.nvm/versions/node/v8.9.4/bin/npm
  Browsers:
    Chrome: 70.0.3538.102
    Firefox: 62.0.3
    Safari: 12.0
  npmPackages:
    gatsby: ^2.0.21 => 2.0.38 
    gatsby-cli: ^2.4.5 => 2.4.5 
    gatsby-plugin-manifest: ^2.0.5 => 2.0.5 
    gatsby-plugin-offline: ^2.0.5 => 2.0.6 
    gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0 
    gatsby-plugin-sass: ^2.0.1 => 2.0.1 
    gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4 
    gatsby-source-contentful: ^2.0.10 => 2.0.10 
  npmGlobalPackages:
    gatsby-cli: 2.4.3

Is this related to not providing the beta contentful rich text environment variable? I don't understand how to provide this.

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[dmbdesignpdx]

Hello,

I am experiencing the same issue with embedded images.

  System:
    OS: macOS High Sierra 10.13.6
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
    Yarn: 1.17.3
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 76.0.3809.100
    Firefox: 68.0.2
    Safari: 12.1.2
  npmPackages:
    gatsby: ^2.3.16 => 2.13.45 
    gatsby-image: ^2.0.29 => 2.2.7 
    gatsby-plugin-emotion: ^4.0.4 => 4.1.2 
    gatsby-plugin-google-analytics: ^2.1.1 => 2.1.6 
    gatsby-plugin-google-tagmanager: ^2.1.5 => 2.1.5 
    gatsby-plugin-manifest: ^2.0.18 => 2.2.4 
    gatsby-plugin-netlify-headers: ^1.0.1 => 1.0.1 
    gatsby-plugin-offline: ^2.0.24 => 2.2.4 
    gatsby-plugin-react-helmet: ^3.0.6 => 3.1.2 
    gatsby-plugin-sharp: ^2.0.33 => 2.2.9 
    gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4 
    gatsby-source-contentful: ^2.0.29 => 2.1.16 
    gatsby-source-filesystem: ^2.0.29 => 2.1.7 
    gatsby-source-hubspot: ^2.0.2 => 2.0.2 
    gatsby-transformer-sharp: ^2.1.13 => 2.2.5 

The image is loaded and published in the rich text editor:

However, when I query the data, the file is not there:

Not sure what's going on: the fields object (a property of target) that should contain the file info is just not there at all. I've tried using different images, adding images at different parts of the editor, even creating a new entry... I still don't get the correct data.

Any ideas as to what's happening?

[oherterich]

Hey @dmbdesignpdx - could you post the GraphQL query you're using?

Also, try clearing the .cache if you haven't already. I've found that GraphQL doesn't return embedded content sometimes after updating things in Contentful, but deleting the cache and rebuilding will fix it.

[dmbdesignpdx]

Yep! Deleting the .cache folder allowed the correct data to come through. Forgot about that, haha. 😅

Thank you for pointing that out.

Oh, here was my query (if it still matters):

query MyQuery {
  contentfulBlogPost {
    blogPost {
      json
    }
  }
}

[oherterich]

Awesome! Glad that solved it 👌