gatsby-source-contentful BLOCKS.EMBEDDED_ASSET data is empty

Viewed 551

I want to display image from rich text contentful, and I follow the documentation, but somehow my Json stringify got this instead :

{
  "nodeType": "embedded-asset-block",
  "content": [],
  "data": {}
}

as you can see the data is empty, bet when I console.log the rich text not using text-types, I got the data and an id

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

below my "cut" Graphql, and yes I can console.log image data from references.

    div4 : contentfulRepeater(name: {eq: "div4"}) {
      h1
      p {
        raw
        references {
          ... on ContentfulAsset {
            contentful_id
            fixed(width: 1600) {
              width
              height
              src
              srcSet
            }
          }
        }        
      }
    }

how I render the data :

<div className="">
            <h2 dangerouslySetInnerHTML={{ __html: data.div4.h1 }} />
            <div>{data.div4.p && renderRichText(data.div4.p, options)}</div>
            <pre>
              <code>{JSON.stringify(data.div4.p.raw, null, 2)}</code>
            </pre>
         </div>

the options

const options = {
  renderMark: {
    [MARKS.BOLD]: text => <Bold>{text}</Bold>,
  },
  renderNode: {
    [BLOCKS.PARAGRAPH]: (node, children) => <Text>{children}</Text>,
    [BLOCKS.HYPERLINK]: (node, children) => <HLink>{children}</HLink>,
    [BLOCKS.EMBEDDED_ASSET]: (node, children) => { 
      return(
        <>
          <pre>
            <code>{JSON.stringify(node, null, 2)}</code>
          </pre>
        </>
      )
    },
  },
}
1 Answers

you need to add both "contentful_id" and "__typename" to your query

raw
references {
  ... on ContentfulAsset {
    contentful_id
    __typename
    fixed(width: 1600) {
Related