Вытяните данные GraphQL в gatsby-browser.js (или лучшее решение, пожалуйста)

Я пытаюсь запустить запрос GraphQL внутри replaceRouterComponent из gatsby-browser.js (API браузера gatsby). Принимая во внимание, что я могу получить доступ к данным из Contentful.

Это может быть не лучшее решение, и любые советы о том, как я могу достичь другим способом, тоже будут оценены.

Вот в чем проблема -

Внутри компонента TripAdvisor.js я монтирую скрипты в componentDidMount, тогда как locationId основан на данных this.props.tripAdvisorId, взятых из индивидуального posts, созданного в Contentful. Каждое 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;
}

Теперь, когда это решение разваливается, это изменение locationId сценария src. Он отлично работает, если мне не нужно было менять locationId на post.

Он не работает, когда link на другой post с другим locationId и компонент обзоров не обновляется. Однако потом link прочь и вернусь к новым обзорам.

Вы можете увидеть, как это происходит здесь, выполнив следующие действия:

1. Щелкните эту ссылку и прокрутите вниз, чтобы просмотреть обзоры, связанные с Chatelaine
2. Затем в меню> выберите Варенна> выберите Обзоры в горизонтальном меню, и вы по-прежнему увидите обзоры Chatelaine.
3. Теперь нажмите> Местоположение в горизонтальном меню> затем снова нажмите Отзывы> вы получите правильные отзывы и засчитаете Варенну.

Репозиторий 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). Принимая во внимание, что я могу получить доступ к данным из Contentful с помощью GraphQL .