rich-text
rich-text copied to clipboard
documentToReactComponents does not acknowledge nodeType: embedded-asset-block
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:
![no_fields](https://user-images.githubusercontent.com/5745874/67024592-f723ea00-f104-11e9-9ad5-a6cad5046f4b.png)
instead, there is a field called includes next to items field:
![includes_instead](https://user-images.githubusercontent.com/5745874/67024737-318d8700-f105-11e9-8364-ee7e99a15bc8.png)
How is it supposed to be done now?
Hi @aepp, Are you using the js SDK?
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.
@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?
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
Ignore my comment. I had the parameters in the wrong order :/
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.
@pjaws @aepp any luck with the .fields? How did you guys solve this issue?
@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} />;
}
}
};
@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.
Ah thanks. That was actually a simplified version; I have more logic in my actual source
@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?
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 .
@pjaws thanks again! I'll take a look again! Have a nice day
@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 youconst 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 :)
@fhelipe-turati-appnovation updating to the latest version of gatsby-source-contentful (v2.3.12) fixes the issue you're experiencing
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.
@angelod1as did you find a solution?
I came back to regular contentful.js
way and gave up GraphQL
@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} />
},
},
}
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}
/>
)}
}
}
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
@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, 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
@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.
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
}
}
}
}
}
}
}
`;
in case you need a working example: https://github.com/converge/personal-website/blob/master/frontend/src/components/Blog/post.js
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
}
}
}
}
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: @.***>