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

Question

我正在尝试从 gatsby-browser.js ( gatsby browser API ) 中的 replaceRouterComponent 中运行一个 GraphQL 查询。然而，我可以从 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 来返回 false，因为它停止了 TripAdvisor 在使用 link

时不断在页面之间更新(导致它中断)

shouldComponentUpdate() {
  return false;
}

现在，此解决方案的失败之处在于更改脚本 src 的 locationId。如果我不需要为每个 post 更改 locationId，它工作得很好。

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

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

1. 单击此 link并向下滚动以查看与 Chatelaine 相关的评论
2. 然后在菜单中 > 选择 V​​arenna > 在水平菜单中选择评论，您仍然会看到 Chatelaine 评论。
3. 现在，点击 > 水平菜单中的位置 > 然后再次点击评论 > 您将获得正确的评论并计入 Varenna。

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

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

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

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

Answer 1

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

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

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

中添加键

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

这种方式 react 将卸载以前的 TripAdvisor 并安装一个新的，从而再次调用 componentDidMount 方法......如果你必须重新安装所有东西只是为了来自 Prop 的不同数据，那可能会有点问题...... ..

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

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