如何在定义含标记数据的const时使用GraphQL数据？

你遇到的问题是因为把GraphQL变量放在了字符串包裹里，导致JS直接把{wpLokation.ACFlokationer.video}当成纯文本输出，没有解析变量的值。按以下方式修改即可：

1. 正确引用GraphQL变量 #

去掉embedUrl值的引号，直接引用变量，还可以用可选链避免数据未加载时的报错：

const videoObject = {
  "@context": "http://schema.org",
  "@type": "VideoObject",
  name: "VIDEO TITLE",
  embedUrl: wpLokation?.ACFlokationer?.video || "",
};

2. 确保数据加载完成后渲染Helmet #

如果wpLokation是异步获取的GraphQL数据，要等数据加载完成再渲染schema脚本，避免出现undefined：

{wpLokation && (
  <Helmet>
    <script type="application/ld+json">
      {JSON.stringify(videoObject)}
    </script>
  </Helmet>
)}

这样修改后，embedUrl就会替换成GraphQL返回的实际视频链接，而不是纯文本字符串了。

内容的提问来源于stack exchange，提问作者TurboTobias