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

Question

我正在尝试从 gatsby-browser.js 中运行 GraphQL 中的 replaceRouterComponent 查询（gatsby browser API). Whereas, I can access data from Contentful.

这可能不是最好的解决方案，任何有关我如何以其他方式实现的建议也将不胜感激。

问题在这里-

组件内部 TripAdvisor.js 我在 componentDidMount 内安装脚本，而 locationId 基于 this.props.tripAdvisorId 从在 Contentful 中创建的个人 posts 拉取。每个 post (属性) 都有一个单独的 locationId，当在脚本中更改时 src 会显示相关的评论。

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*** 的函数（其中 *** 是随机数）。没有这个，当到达具有 Link

的组件时不会调用该函数

/templates/properties/reviews.js

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

在 /templates/properties/reviews.js 的同一个文件中我使用 shouldComponentUpdate 到 return false 因为它停止了 TripAdvisor 使用 link

时在页面之间不断更新（导致页面中断）

shouldComponentUpdate() {
  return false;
}

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

当 link 到另一个具有不同 locationId 的 post 并且评论组件未更新时失败。然而，然后 link 离开并 return 到新的评论。

您可以看到这种情况发生 here 并按照以下步骤操作 -

单击此 link 并向下滚动以查看与 Chatelaine 相关的评论
然后在菜单 > select Varenna > select 水平菜单中的评论，您仍然可以看到 Chatelaine 评论。
现在，单击 > 水平菜单中的位置 > 然后再次单击评论 > 您将获得正确的评论并计算 Varenna。

完整站点 here 有一个 GitHub 存储库。要查找的两个文件位于 /src/templates/properties/reviews.js 和 src/components/properties/TripAdvisor.js

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

但是，我找不到在 gatsby-browser.js 中使用 tripAdvisorID 数据的解决方案（gatsby browser API). Whereas, I can access data from Contentful 使用 GraphQL .

如果您有其他解决方案，请告诉我。

Answer 1

好吧，如果您的问题是更新组件，那么问题可能出在您处理副作用的方式上（TripAdvisor 中的 componentDidMount 获取）。

据我所见，你在props中收到的数据都很好，应该可以获取，但是有错误。 componentDidMount 将 ONLY BE CALLED ONCE，这次是该组件第一次在页面中加载。所以你的道具改变和你再次渲染并不重要，componentDidMount 中的代码不会被再次调用.

您可以通过两种方式进行修复。而是在

中添加密钥

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

这种反应将卸载以前的 TripAdvisor 并安装一个新的，从而再次调用 componentDidMount 方法...如果您必须重新安装所有内容只是为了与道具不同的数据，这可能会有点问题....

我可以向您推荐第二种方式，这也是他们在 React Documentation. 中推荐的方式，而不是在 componentDidMount 中实现您的更改，而是在 componentDidUpdate(prevProps, prevState) 中进行（注意：您需要通过 this.props.tripAdvisorId !== prevProps.tripAdvisorId 保护您的提取，否则您将进入无限循环。

我认为这是您更新数据的问题，与 gatsby 无关...但如果问题仍然存在，请评论我，我可以进一步检查您运行遇到的 GraphQL 问题.

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

Pull GraphQL data into gatsby-browser.js (or better solution, please)

javascript

reactjs

react-router

graphql

gatsby