documentToReactComponents does not acknowledge nodeType: embedded-asset-block

[aepp]

Since #58 is closed:

The documentToReactComponents doesn't render embedded images. I can't pass custom renderer as suggested in #58 (I can, but node doesn't contain the needed data to render the image), because there is no fields field in target anymore:

instead, there is a field called includes next to items field:

How is it supposed to be done now?

[Khaledgarbaya]

Hi @aepp, Are you using the js SDK?

[aepp]

Hi @Khaledgarbaya

Are you using the js SDK?

no

I'm doing it similar to this example: https://www.contentful.com/blog/2019/02/18/how-build-react-redux-app/

Like this:

fetch(
    `https://cdn.contentful.com/spaces/xyz/entries?content_type=myType`,
    {
      headers: {
        Authorization: `Bearer ${accessToken}`
      }
    }
  )

Do I have to use the SDK?

EDIT:

I tried the SDK - the response looks the same, assets can still not be rendered.

[aepp]

@Khaledgarbaya what's the status on this issue? Could you reproduce the issue? Do you have any workarounds or suggestions on how to render the images?

[mjmaurer]

Also having this issue. Here's a paste of the stack trace: https://pastebin.com/3mxUDjMQ

I've tried cleaning my gatsby cache and have ensured that all contentful fields are populated (even those that aren't required).

Here's the gatsby graphql output of the asset: https://pastebin.com/3N3bTUC5

This occurs when passing any options into documentToReactComponents. Even when those options don't specify a BLOCKS.EMBEDDED_BLOCK renderer. I think this indicates the parser as a problem with the assets themselves. No problem occurs if I don't include options, but the embedded assets don't render

[mjmaurer]

Ignore my comment. I had the parameters in the wrong order :/

[pjaws]

I'm also having this issue. This library does not render embedded assets at all.

EDIT: I just saw the part about custom renderers. That documentation could definitely be improved.

[fhelipe-turati-appnovation]

@pjaws @aepp any luck with the .fields? How did you guys solve this issue?

[mjmaurer]

@fhelipe-turati-appnovation here's options to pass to documentToReactComponents that worked for me. Check graphiql because the json for the rich text might be different for you

const sectionRendererOptions = {
  renderNode: {
    [BLOCKS.EMBEDDED_ASSET]: node => {
      const { file } = node.data.target.fields;
      const { url } = file["en-US"];
      return <img href={url} />;
    }
  }
};

[pjaws]

@fhelipe-turati-appnovation here is how I solved it:

const dtrOptions = {
  renderNode: {
    [BLOCKS.EMBEDDED_ASSET]: (node) => (
      <img
        src={node.data?.target?.fields?.file?.url}
        alt={node.data?.target?.fields?.title}
      />
    ),
  },
};

Note: I'm using optional chaining here, which may not be available in your environment.

@mjmaurer I think you mean src instead of href in your img tag.

[mjmaurer]

Ah thanks. That was actually a simplified version; I have more logic in my actual source

[fhelipe-turati-appnovation]

@mjmaurer @pjaws Thank you so much... unfortunately, I can get the .fields.file from my node.data.target. I just have this: Are you guys using the plugin gatsby-source-contentful?

[pjaws]

No, I’m using this library that we’re commenting on. If you’re using Gatsby, you should be doing this with GraphQL I imagine.

On Mon, Mar 2, 2020 at 8:36 AM ftappno [email protected] wrote:

@mjmaurer https://github.com/mjmaurer @pjaws https://github.com/pjaws Thank you so much... unfortunately, I can get the .fields.file from my node.data.target. I just have this: [image: Screen Shot 2020-03-02 at 8 35 39 AM] https://user-images.githubusercontent.com/60794187/75696700-db0e8880-5c60-11ea-9eec-840d676cd127.png Are you guys using the plugin gatsby-source-contentful?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/contentful/rich-text/issues/119?email_source=notifications&email_token=AMVRRIUWSVWP2RJRGFOOUZTRFPOBRA5CNFSM4JB3SO42YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENP77NQ#issuecomment-593493942, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMVRRITJIZHO7ANAOGVSOP3RFPOBRANCNFSM4JB3SO4Q .

[fhelipe-turati-appnovation]

@pjaws thanks again! I'll take a look again! Have a nice day

[wutangpaul]

@fhelipe-turati-appnovation here's options to pass to documentToReactComponents that worked for me. Check graphiql because the json for the rich text might be different for you

const sectionRendererOptions = {
  renderNode: {
    [BLOCKS.EMBEDDED_ASSET]: node => {
      const { file } = node.data.target.fields;
      const { url } = file["en-US"];
      return <img href={url} />;
    }
  }
};

You would want to return a src here rather than a href :)

[james2406]

@fhelipe-turati-appnovation updating to the latest version of gatsby-source-contentful (v2.3.12) fixes the issue you're experiencing

[angelod1as]

With GraphQL and Next, my query returns this on an image block:

                {
                  "nodeType": "embedded-asset-block",
                  "content": [],
                  "data": {
                    "target": {
                      "sys": {
                        "id": "pKIjGghQzXdS8Iu1JuIg1",
                        "type": "Link",
                        "linkType": "Asset"
                      }
                    }
                  }
                },

I can't seem to understand what I have to do to show this image, as there's no URL anywhere.

[OlivierCo]

@angelod1as did you find a solution?

[angelod1as]

I came back to regular contentful.js way and gave up GraphQL

[gabrielmlinassi]

@angelod1as you need to use __typename

Refer to this issue https://github.com/contentful/rich-text/issues/61#issuecomment-740691185

  query($slug: String!) {
    contentfulBlogPost(slug: { eq: $slug }) {
      title
      publishedDate(formatString: "MMMM Do, YYYY")
      body {
        raw
        references {
          ... on ContentfulAsset {
            contentful_id
            __typename
            title
            fixed(width: 750) {
              src
            }
          }
        }
      }
    }
  }

and then on gatsby

  const options = {
    renderNode: {
      [BLOCKS.EMBEDDED_ASSET]: node => {
        const {
          fixed: { src },
          title,
        } = node.data.target

        return <img src={src} alt={title} />
      },
    },
  }

[thomasrothgrabx]

When getting the richt text field you need to fetch the links to the assets too:

content {
 json
 links {
   assets {
     block {
       title
       url
       sys {
         id
       }
     }
   }
 }
}

Then you can find the linked asset:

const richTextOptions = {
   renderNode: {
     [BLOCKS.EMBEDDED_ASSET]: (node) => {
       const img = content.links.assets.block.find(i => i.sys.id === node.data.target.sys.id)
       return (
         <img
           src={img?.url}
           alt={img?.title}
         />
     )}
   }
 }

[michel-fresh]

Wondering if anyone knows how to do this with audio or video assets? I'm unclear what fields I can query for those content type. this is my query that retrieves images and renders images just fine (using the pattern detailed above with [BLOCKS.EMBEDDED_ASSET], how do I query for and access other file types? My query does return a node but fixed is undefined as it's not an image but an audio/video file.

      content {
        raw
        references {
          ... on ContentfulAsset {
            contentful_id
            __typename
            fields
            fixed(width: 300) {
              ...GatsbyContentfulFixed
            }
          }
        }
      }

EDIT If anyone comes looking, I was able to get the Asset schema from this link: https://www.contentful.com/developers/docs/references/content-delivery-api/#/reference/assets

[codeghoul]

@thomasrothgrabx, using the suggested query leads to the following error:

{ "errors": [ { "message": "Query cannot be executed. The maximum allowed complexity for a query is 11000 but it was 100400. Simplify the query e.g. by setting lower limits for collections.", "extensions": { "contentful": { "code": "TOO_COMPLEX_QUERY", "details": { "maximumCost": 11000, "cost": 100400 } } } } ] }

[thomasrothgrabx]

@thomasrothgrabx, using the suggested query leads to the following error:

{ "errors": [ { "message": "Query cannot be executed. The maximum allowed complexity for a query is 11000 but it was 100400. Simplify the query e.g. by setting lower limits for collections.", "extensions": { "contentful": { "code": "TOO_COMPLEX_QUERY", "details": { "maximumCost": 11000, "cost": 100400 } } } } ] }

@codeghoul

if you have collections in your query, try to limit them

someCollection(limit: 1) { items { } }

or if you need all of your items you have to work with pagination

[codeghoul]

@thomasrothgrabx, thank you for your response. I am still in initial phase of my development so I switched to markdown and used remark to parse everything. Works like a charm.

[mathiasrscom]

Here is an example of a query that works around the complexity by adding limit 1. My Rich Text field is named content in my example.

articleCollection(limit: 1, where: { slug: $slug }) {
        items {
          title
          slug
          excerpt
          date
          contentfulMetadata {
            tags {
              name
              id
            }
          }
          featuredImage {
            title
            url
            width
            height
          }
          content {
            json
            links {
              entries {
                block {
                  sys {
                    id
                  }
                }
              }
              assets {
                block {
                  sys {
                    id
                  }
                  url
                  title
                  width
                  height
                }
              }
            }
          }
        }
      }
    }
  `;

[converge]

in case you need a working example: https://github.com/converge/personal-website/blob/master/frontend/src/components/Blog/post.js

[MatteoGioioso]

Unfortunately this does not work for me with gatsby:

Cannot query field "links" on type "ContentfulPostContent".

If you don't expect "links" to exist on the type "ContentfulPostContent" it is most likely a typo.

UPDATE

Solved by running this:

  references {
          ... on ContentfulAsset {
            contentful_id
            __typename
              file {
               url
             }
            }
         }
      }

[pjaws]

I recommend using Contentful’s GraphQL playground app to learn how they structure their data. It has pretty solid autocomplete that should be helpful.

On Thu, Feb 23, 2023 at 10:32 AM Matteo Gioioso @.***> wrote:

Unfortunately this does not work for me with gatsby:

Cannot query field "links" on type "ContentfulPostContent".

If you don't expect "links" to exist on the type "ContentfulPostContent" it is most likely a typo.

— Reply to this email directly, view it on GitHub https://github.com/contentful/rich-text/issues/119#issuecomment-1442244607, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMVRRIRVU7ZUR4KZAS3Q5YTWY6ULDANCNFSM4JB3SO4Q . You are receiving this because you were mentioned.Message ID: @.***>