CODEWITHSUNDEEP
reactjsgraphqlgatsby
JFelix
JFelix

Reputation: 155

Not able to Query hyperlinks from GraphQL on Gatsby JS

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 <a href="https://www.test.es"></a> 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,

Upvotes: 0

Views: 127

Answers (2)

codeatdabeach
codeatdabeach

Reputation: 1

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

Upvotes: 0

Fasani
Fasani

Reputation: 5749

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.

Upvotes: 1

Related Questions