Javascript 将GraphQL数据拉入gatsby-browser.js（或更好的解决方案，请）

我正试图在

gatsby browser.js

（）内运行GraphQL查询

replaceRouterComponent

。然而，我可以从访问数据

这可能不是最好的解决方案，如果您能给我一些建议，我将不胜感激

问题就在这里-

在组件TripAdvisor.js内部，我正在

componentDidMount

中装载脚本，而

locationId

是基于

this.props.tripAdvisorId

的数据从Contentful中创建的个人

帖子中提取的。每个
post
（属性）都有一个单独的
locationId
，当在脚本
src
中更改时，该ID会显示相关的审阅

componentDidMount () {
    const tripadvisorLeft = document.createElement("script");
    tripadvisorLeft.src = "https://www.jscache.com/wejs?wtype=selfserveprop&uniq=789&locationId=" + this.props.tripAdvisorId + "&lang=en_AU&rating=true&nreviews=0&writereviewlink=true&popIdx=true&iswide=true&border=false&display_version=2";
    tripadvisorLeft.async = true;
    document.body.appendChild(tripadvisorLeft);

    const tripadvisorRight = document.createElement("script");
    tripadvisorRight.src = "https://www.jscache.com/wejs?wtype=selfserveprop&uniq=998&locationId=" + this.props.tripAdvisorId + "&lang=en_AU&rating=false&nreviews=4&writereviewlink=false&popIdx=false&iswide=true&border=false&display_version=2";
    tripadvisorRight.async = true;
    document.body.appendChild(tripadvisorRight);
}

我在页面级的
componentDidMount
中还有一个函数，用于重写上面TripAdvisor脚本中的数据。TripAdvisor脚本创建了一个名为injectselfserveprop***（其中***是随机数）的函数。如果没有此功能，则在使用
链接到达组件时不会调用此函数

/templates/properties/reviews.js

componentDidMount() {
  Object.keys(window).forEach((key) => {
      if (key.match(/^injectselfserveprop[0-9]+$/)) {
          window[key]();
      }
  });
}

在/templates/properties/reviews.js的同一个文件中，我使用
shouldComponentUpdate
来
返回false
，因为当使用
链接时，它会阻止TripAdvisor在页面之间不断更新（导致其中断）

shouldComponentUpdate() {
  return false;
}

现在，这个解决方案的失败之处在于更改脚本
src
的
locationId
。如果我不需要按照
post
更改
locationId
，它就可以正常工作

当
链接
到另一个具有不同
位置ID
的
post
且reviews组件未更新时，它将失败。但是，然后链接
并返回到新评论

您可以看到这种情况发生，并遵循以下步骤-

单击此项并向下滚动查看与Chatelaine相关的评论
然后在菜单>选择Varenna>水平菜单中选择评论，您仍然可以看到Chatelaine评论
现在，单击水平菜单中的>位置>然后再次单击评论>您将获得正确的评论并计算Varenna
完整站点有一个GitHub存储库。要查找的两个文件位于
/src/templates/properties/reviews.js
和
src/components/properties/TripAdvisor.js

现在我已经概述了我的问题，我认为最好的解决方案是在
gatsby browser.js
中使用条件语句将TripAdvisor脚本包装在
replaceRouterComponent
中，以仅应用于通过
链接直接访问
reviews.js
的页面

但是，在使用
gatsby browser.js
（）中的
tripAdvisorID
数据时，我找不到解决方案。然而，我可以使用GraphQL从访问数据

如果您有其他解决方案，请让我知道。
好吧，如果您的问题是更新组件，那么问题可能是您处理副作用的方式（组件安装
获取TripAdvisor）

据我所见，您在props中接收到的数据都很好，应该可以获取，但有一个错误
componentDidMount
将只调用一次，这是组件第一次加载到页面中。因此，道具更改和再次渲染都无关紧要，不再调用
componentDidMount
中的代码

您可以通过两种方式进行修复。相反，您添加了密钥

 <TripAdvisor key={tripAdvisorId} name={name} starRating={starRating} location={location} tripAdvisorId={tripAdvisorId} * />



这样react将卸载以前的TripAdvisor并装载一个新的TripAdvisor，从而再次调用componentDidMount方法。。。如果你不得不重新安装所有东西，只是为了从道具中获取不同的数据，那会有什么问题呢

我可以向您推荐第二种方法，这也是他们在中推荐的方法，而不是在
componentDidMount
中实现您的更改，而是在
componentdiddupdate（prevProps，prevState）
（注意：您需要通过
this.props.tripAdvisorId！==prevProps.tripAdvisorId
保护您的获取，否则您将进入无限循环）

我认为这是您更新数据的问题，与盖茨比无关……但如果问题持续存在，请评论我，我可以进一步检查您遇到的GraphQL问题