Gatsby: Responsive images with gatsby-source-contentful rich text and gatsby-image

[marcuslindfeldt]

Summary

Unable to use gatsby-image in combination with Contentful rich text queried via gatsby-source-contentful.

Example query

  query BlogPostBySlug($slug: String!) {
    contentfulBlogPost(slug: { eq: $slug }) {
      title
      childContentfulBlogPostSubtitleTextNode {
        subtitle
      }
      body {
        content {
          data {
            target {
              fields {
                file {                  
                  en_US {
                    contentType
                    url
                    // this does not work!
                    fluid(maxWidth: 500){
                      ...GatsbyContentfulFluid_withWebp
                    }                    
                  }
                }
              }
            }
          }
        }
      }
    }
  }

Relevant information

I'm trying to use the embedded assets feature in Contentful rich text to include an image into my rich text and make it responsive and optimized by utilizing gatsby-image in the same way that I can if i query the assets directly e.g.

graphql`
  query MyQuery {
    # Example is for a `ContentType` with a `ContenfulAsset` field
    # You could also query an asset directly via
    # `allContentfulAsset { edges{ node { } } }`
    # or `contentfulAsset(contentful_id: { eq: "contentful_id here" } ) { }`
    contentfulMyContentType {
      myContentfulAssetField {
        # Direct URL to Contentful CDN for this asset
        file { url }

        # Query for a fluid image resource on this `ContentfulAsset` node
        fluid(maxWidth: 500){
          ...GatsbyContentfulFluid_withWebp
        }
      }
    }
  }
`

Is this possible or is there another way to handle this?

[LekoArts]

Please see if these two are helpful, however I'd advise to ask the contentful folks directly as they're maintaining the plugin(s):

https://spectrum.chat/gatsby-js/general/can-someone-have-success-rendering-the-rich-text-field-contentful-in-gatsby~3c27998e-1c7a-4846-b4dc-849e884b3bc6

https://github.com/contentful/rich-text/issues/70

[gatsbot[bot]]

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!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

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

[gatsbot[bot]]

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.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

[jmdmacapagal]

@marcuslindfeldt have you solved this yet? Im encountering this probleem too, I cant query the rich text image from contentful for gatsby-image