[Blocks.EMBEDDED_ASSET] not working for images

[codeithuman]

[Blocks.EMBEDDED_ASSET] not working for images.

I think it has to do with

rich-text-to-jsx/src/rich-text-to-jsx.js

Line 118 in 5096c38

const contentType = get(data, 'target.contentType');

.

My node structure does not match this pattern, but looks like the following. It is an image asset uploaded to a rich text field:

My goal is to pull the id (contentful_id) out of data.target.sys and then use to query for that image and produce a fluid image for gatsby-image.

[codeithuman]

I forked the project and found a fix that works for me. You can override [Blocks.EMBEDDED_ASSET] with a component now. If you don't override, no component or 'unknown' message is displayed. https://github.com/codeithuman/rich-text-to-jsx

[connor-baer]

Hi @codeithuman! Thanks for opening an issue. I struggled a bit to find a good, flexible solution for embedded assets and entries. Assets are particularly tricky since they don't have a content type and the mime type seems overly specific (e.g. you probably want to use the same component for image/jpg and image/png).

I've finally found a compromise that I'm happy with: for assets, you can now define custom components by mime type group — that's the first part of the mime type, e.g. image. I've just released this change as 2.0.0 (it's a breaking change to the API).

Have a look at the updated docs and let me know what you think!

[codeithuman]

Wonderful, thank you @connor-baer! I'll be able to take a look before the end of the week and let you know. Again, I appreciate your time on this.

[connor-baer]

I've also added default components for image, video, and audio assets. Published as 2.1.0.

[kylefraser]

@connor-baer @codeithuman have either of you been able to test this and confirm that it's working?

I'm getting a:

Node type is invalid red line error.

It looks like there is no nodeType in the content array on the embedded-asset-block in my query and thus it's failing.

My graphQL query looks like this

    body {
      nodeType
      content {
        nodeType
        data {
          target {
            sys {
              id
            }
          }
        }
        content {     
          value
          nodeType
		  data {
            uri
          }
        }
      }
    }

And the results looks like this:

...
{
  "nodeType": "embedded-asset-block",
    "data": {
      "target": {
        "sys": {
          "id": "c5cTwlejTau9t8MRbUNEze"
         }
       }
    },
  "content": []
},
{
  "nodeType": "heading-2",
    "data": {
      "target": null
       },
   "content": [
     {
      "value": "Test header field",
      "nodeType": "text"
     }
   ]
},
...

I believe the error is stemming from that empty content array and that it's looking for a nodeType within that.

Any help would be greatly appreciated. Everything else is working fine. Thanks.

[codeithuman]

Kyle, I tried it real quick and have a similar error. Unfortunately I haven’t had time to look into it further and still using the have solution in the fork I made. I will be revisiting this in the weeks to come as I’m planning to use Contentful + Gatsby on additional projects in the future.

…

On Tue, Feb 12, 2019 at 5:46 AM Kyle Fraser ***@***.***> wrote: @connor-baer <https://github.com/connor-baer> @codeithuman <https://github.com/codeithuman> have either of you been able to test this and confirm that it's working? I'm getting a: Node type is invalid red line error. It looks like there is no nodeType in the content array on the embedded-asset-block in my query and thus it's failing. My graphQL query looks like this body { nodeType content { nodeType data { target { sys { id } } } content { value nodeType } } } And the results looks like this: ... { "nodeType": "embedded-asset-block", "data": { "target": { "sys": { "id": "c5cTwlejTau9t8MRbUNEze" } } }, "content": [] }, { "nodeType": "heading-2", "data": { "target": null }, "content": [ { "value": "Test header field", "nodeType": "text" } ] }, ... I believe the error is stemming from that empty content array and that it's looking for a nodeType within that. Any help would be greatly appreciated. Everything else is working fine. Thanks. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADVSbXcEWwQcry98i5JQ1Svu15TqXixLks5vMsWWgaJpZM4adcMX> .

[connor-baer]

@kylefraser For assets, I use the mime type group which is extracted from the asset's mime type.

The mime type is not part of the content, but the target property, specifically at target.fields.file.contentType.

Could you please try with this query?

...
    body {
      nodeType
      content {
        nodeType
        data {
          target {
            sys {
              id
            }
            fields {
              file {
                contentType
              }
            }
          }
        }
        content {     
          value
          nodeType
		  data {
            uri
          }
        }
      }
    }
...

[kylefraser]

@connor-baer hmm i'm unable to even query fields on target, it doesn't show up.

scratch that, I'm able to grab this.. still no image however.

looks like it's because of the extra locale i have in my query.

body {
      nodeType 
      content {        
        nodeType
        data {          
          target {            
            sys {
              id
            }
            fields {              
              file {                
                en_US {                  
                  fileName
                  contentType
				  url
                }
              }
            }
          }          
        }
        content {     
          value
          nodeType
          data {
            uri
          }
        }
      }
    }

[connor-baer]

Yeah, rich-text-to-jsx requires a specific content structure: entry and asset links need to be resolved and the content localized. I'll add a note about this to the README.

If you're unable to adapt your content structure, I'd recommend looking at the official rich-text-react-renderer package. I collaborated on it with another developer after realizing the limitations of this approach.

[kylefraser]

Thank you all for the feedback. @connor-baer we were able to get everything working with the rich-text-react-renderer, thanks a bunch of pointing me in the right direction!