Я пытаюсь выполнить GraphQL запрос внутри replaceRouterComponent из gatsby-browser.js ( API браузера gatsby ). Принимая во внимание, что я могу получить доступ к данным из Содержательные .
Возможно, это не самое лучшее решение, и любой совет о том, как мне достичь другим путем, также будет оценен.
Вот вопрос -
Внутри компонента TripAdvisor.js Я монтирую скрипты в componentDidMount, тогда как locationId основан на данных this.props.tripAdvisorId, извлеченных из отдельных posts, созданных в * 1026 содержательной *. Каждый 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
/ шаблоны / свойства / 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;
}
Теперь, где это решение разваливается, это изменение locationId скрипта src. Он отлично работает, если мне не нужно менять locationId на post.
Сбой, когда link на другой post с другим locationId и компонент рецензирования не обновляется. Однако затем link прочь и вернитесь к новым отзывам.
Вы можете видеть, что это происходит здесь и следуя этим шагам -
- Нажмите эту ссылку и прокрутите вниз, чтобы увидеть обзоры, связанные с Chatelaine
- Затем в меню> выберите Varenna> выберите Обзоры в горизонтальном меню, и вы по-прежнему видите рецензии Chatelaine.
- Теперь нажмите> Расположение в горизонтальном меню>, затем снова нажмите Обзоры>, чтобы получить правильные отзывы и рассчитать Varenna.
Здесь есть репозиторий GitHub для полного сайта здесь . Два файла для поиска находятся в /src/templates/properties/reviews.js и src/components/properties/TripAdvisor.js
Теперь я обрисовал свою проблему, и я считаю, что лучшее решение - это gatsby-browser.js, заключив сценарий TripAdvisor в replaceRouterComponent с условным оператором, применимым только к страницам, которые напрямую обращаются к reviews.js через Link.
Однако я не могу найти решение по использованию данных tripAdvisorID внутри gatsby-browser.js ( API браузера gatsby ). Принимая во внимание, что я могу получить доступ к данным из Содержательные , используя GraphQL .
Если у вас есть другое решение, пожалуйста, дайте мне знать.