Создание карты ссылок для переключения языка сайта с многоязычными слагами

Question

Я использую GatsbyJS для создания многоязычного сайта, используя WordPress в качестве бэкэнда, а Polylang отвечает за переводы. Все работает, но выглядит как-то хакерски и не так чисто, как могло бы быть.

Моя главная проблема заключается в том, что я могу создать переключатель языка только для каждой страницы внутри самой страницы. Моя цель состоит в том, чтобы как-то создать карту ссылок, которую я могу использовать внутри своего компонента Header или Layout. Я не уверен, как получить доступ к данным там.

Я пробовал запрашивать все страницы и переводы в моем макете и связывать их соответственно, чтобы иметь возможность переключать язык и путь, но безуспешно: /

Я нашел следующий фрагмент кода, который должен идти внутри gatsby-node.js, но, честно говоря, понятия не имею, как его использовать:

const buildLinkMap = ({ getNodes }) => {
  const linkMap = {}

  const typeMap = {
    wordpress__PAGE: "page",
  }

  for (let node of getNodes()) {
    if (node.internal.type in typeMap) {
      linkMap[node.wordpress_id] = buildLink({
        lang: node.lang,
        slug: node.slug,
        type: typeMap[node.internal.type],
      })
    }
  }
  return linkMap
}

На моих страницах я создаю соответствующие ссылки:

{page.polylang_translations.map(polylang_translations => (
      <Link
        to {`${polylang_translations.polylang_current_lang}/${polylang_translations.slug}`}>
        {polylang_translations.polylang_current_lang}
      </Link>
))}

На странице about, например, это даст мне следующие ссылки:

1. / о / о
2. / де / юбер-унс
3. / эс / nosotros

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

Любые идеи или указатели будут высоко оценены!