将 GraphQL 数据拉入 gatsby-browser.js(或更好的解决方案，请) [英] Pull GraphQL data into gatsby-browser.js (or better solution, please)

问题描述

我正在尝试从 gatsby-browser.js (gatsby 浏览器 API).而我可以从 Contentful 访问数据.

I am trying to run a GraphQL query inside replaceRouterComponent from within gatsby-browser.js (gatsby browser API). Whereas, I can access data from Contentful.

这可能不是最好的解决方案，任何关于我如何以另一种方式实现的建议也将不胜感激.

This may not be the best solution and any advice on how I can achieve in another way would be appreciated too.

这里是问题 -

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

Inside of the component TripAdvisor.js I am mounting the scripts within componentDidMount, whereas the locationId is based on the data of this.props.tripAdvisorId pulled from the individual posts created in Contentful. Each post (property) has an individual locationId that when changed in the script src presents the reviews that relate.

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

I also have a function inside componentDidMount at page level to rewrite the data from the TripAdvisor script above. The TripAdvisor script creates a function called injectselfserveprop*** (where *** are random numbers). Without this, the function is not called when reaching the Component with 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 因为它停止了 使用 link

In the same file of /templates/properties/reviews.js I use shouldComponentUpdate to return false as it stops the TripAdvisor from continually updating between pages (causing it to break) when using link

shouldComponentUpdate() {
  return false;
}

现在，此解决方案失败的地方在于更改脚本 src 的 locationId.如果我不需要更改每个 post 的 locationId，它工作得非常好.

Now, where this solution falls apart is in changing the locationId of the script src. It works perfectly fine if I did not need to change the locationId per post.

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

It fails when link to another post with a different locationId and the reviews component not updating. However, then link away and return to the new reviews.

您可以在此处看到这种情况，并按照以下步骤操作 - >

You can see this happening here and following these steps -

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

1. Click this link and scroll down to see the reviews related to Chatelaine
2. Then in the menu > select Varenna > select Reviews in the horizontal menu and you still see Chatelaine reviews.
3. Now, click on > Location in the horizontal menu > then click Reviews again > you get the correct reviews and count for Varenna.

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

There is a GitHub repository for the full site here. The two files to look for are in /src/templates/properties/reviews.js and src/components/properties/TripAdvisor.js

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

Now I have outlined my issue, I believe the best solution is within gatsby-browser.js wrapping the TripAdvisor scripts inside replaceRouterComponent with a conditional statement to apply only to pages that directly access the reviews.js via Link.

但是，我无法找到使用 gatsby-browser.js 中的 tripAdvisorID 数据的解决方案(gatsby 浏览器 API).而我可以使用 GraphQL 从 Contentful 访问数据>.

However, I cannot find a solution in using the tripAdvisorID data inside gatsby-browser.js (gatsby browser API). Whereas, I can access data from Contentful using GraphQL.

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

If you have another solution then please let me know.

推荐答案

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

Well, If your problem is the updating the component maybe the problem is in the way you are dealing with side effects (the componentDidMount fetch in TripAdvisor).

就我所见，你在 props 中收到的数据都是好的，应该可以获取，但是有错误.componentDidMount 将只调用一次，这次是组件第一次加载到页面中.所以不管你的 props 改变了，你再次渲染，componentDidMount 中的代码不会被再次调用.

For what I can see, the data that you receive in props is all good, and it should fetch, but there is an error. componentDidMount will ONLY BE CALLED ONCE, and this time is the first time the component has been loaded in the page. So it doesnt matter that your props change and that you render again, the code in componentDidMount won't be called again.

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

You could do the fix in 2 ways. Rather you add key in

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

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

This way react will unmount the previous TripAdvisor and mount a new one thereby calling the componentDidMount method again... What could be a bit of a problem if you have to be remounting everything just for a different data from the props....

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

I could recommend you a second way, that is also the way they recommend in the React Documentation. Instead of realizing your changes in componentDidMount, do them in componentDidUpdate(prevProps, prevState) (NOTE: You will need to safe your fetch by this.props.tripAdvisorId !== prevProps.tripAdvisorId or you will enter a infinite loop).

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

I think that this is the problem for you to update the data, nothing gatsby related... But comment me if the problem persist and I could check further into the GraphQL problems that you are running into.

这篇关于将 GraphQL 数据拉入 gatsby-browser.js(或更好的解决方案，请)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！