Not able to Query hyperlinks from GraphQL on Gatsby JS - reactjs

Question

I'm working on a Blog on Gatsby JS, and I'm having an issue with the hyperlinks, and I'm not able to solve it.
I have the following query
const options = {
renderNode: {
"embedded-asset-block": (node) => {
const alt = node.data.target.fields.title['es']
const url = node.data.target.fields.file['es'].url
return <img alt={alt} src={url} />
},
[INLINES.HYPERLINK]: (node) => {
if(node.data.uri.indexOf('youtube.com') !== -1){
return(
<iframe width="560" height="315" src={node.data.uri} frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
)
}else{
return(
<a href={node.data.uri}>{node.content.value}</a>
)
}
}
}
}
From this query, I'm able to add assets and youtube videos. The issue is, that when I add a hyperlink, they are shown on the page but without text.
I only see the and not the text of this link.
I know the problem is here <a href={node.data.uri}>{node.content.value}</a>, but I'm not able to query the value.
This is GraphQL:
"body": {
"json": {
"nodeType": "document",
"data": {},
"content": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "Desde ",
"marks": [],
"data": {}
},
{
"nodeType": "hyperlink",
"content": [
{
"nodeType": "text",
"value": "FelixDigital",
"marks": [],
"data": {}
}
I need to query the value (FelixDigital)
Does anybody can help me?
Thank you so much,

Answer 1

Can you do a debugger inside this code?
It's hard to say.. but what I would check is the value of node. To me it looks like content is an array and inside the first item of the array you have value so to me it should look more like node.content[0].value.

Answer 2

I'm guessing you are using Contentful to pull your data into your blog using GraphQL. With Contentful you must use documentToReactComponents on JSON nodes (all rich text items). To obtain FelixDigital, you may want to do something instead like:
import { documentToReactComponents } from '#contentful/rich-text-react-renderer';
return(
<div>
{documentToReactComponents(videos.videoItem.videoLinks.json, options)}
</div>
)
This will then use the iframe you set up in const options and grab the src uri.
More info can be found here on rendering rich text with contentful