无法在 Gatsby JS 上从 GraphQL 查询超链接答案

【问题标题】：Not able to Query hyperlinks from GraphQL on Gatsby JS无法在 Gatsby JS 上从 GraphQL 查询超链接
【发布时间】：2020-11-19 05:04:10
【问题描述】：

我正在编写有关 Gatsby JS 的博客，但我遇到了超链接问题，我无法解决。

我有以下问题

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>
                    )
                }
            }
        }
    }

通过此查询，我可以添加资产和 youtube 视频。问题是，当我添加超链接时，它们会显示在页面上但没有文字。

我只看到<a href="https://www.test.es"></a> 而不是这个链接的文字。

我知道问题出在<a href={node.data.uri}>{node.content.value}</a>，但我无法查询该值。

这是 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": {}
                          }

我需要查询值（FelixDigital）

有人可以帮我吗？

非常感谢，

【问题讨论】：

标签： reactjs graphql gatsby

【解决方案1】：

你能在这段代码中做一个调试器吗？

很难说.. 但我要检查的是node 的值。对我来说，内容看起来像是一个数组，并且在数组的第一项内你有价值，所以对我来说它应该看起来更像node.content[0].value。

【讨论】：

【解决方案2】：

我猜您正在使用 Contentful 使用 GraphQL 将您的数据提取到您的博客中。使用 Contentful，您必须在 JSON 节点（所有富文本项）上使用 documentToReactComponents。要获得 FelixDigital，您可能需要执行以下操作：

import { documentToReactComponents } from '@contentful/rich-text-react-renderer';


return(
        <div>
           {documentToReactComponents(videos.videoItem.videoLinks.json, options)}
         </div>
    )

然后这将使用您在const options 中设置的 iframe 并获取 src uri。

更多信息可以在这里找到rendering rich text with contentful

【讨论】：