Гэтсби: динамическая загрузка контента i18n из контента

Question

У нас есть stati c сайт, использующий Gatsby и содержательный. Теперь мы хотим поддерживать многоязычность с локализованным контентом от contentful. Я могу заполнить запрос graghql:

query frontpageTeaser($lang: String) {
    contentfulFrontpage(node_locale: { eq: "zh-CN" }) {
      myArticalContent
      ...
    }
  } 

Этот запрос может загружать китайский контент из contentful и Engli sh, если он изменен на node_locale: { eq: "en-US" }.

Теперь Проблема в следующем: мы хотим поддерживать переключение языка, чтобы при переключении языка graphql загружал соответствующий локализованный контент.

Мы используем gatsby-plugin-react-i18next , который имеет следующую замечательную функцию:

Поддержка многоязычных URL-адресов в одностраничном компоненте. Вам не нужно создавать отдельные страницы, такие как pages / en / index. js или pages / es / index. js.

Страницы, такие как http://localhost: 8000 / zh-CN / загружает китайский из локального /locales/zh-CN/translation.json, но как загрузить локализованный контент при переключении языка?

Graphql, похоже, предоставляет запрос страницы , поэтому я добавил gatsby-node.js:

exports.createPages = async function ({ actions, graphql }) {
  actions.createPage({
    path: '/zh-CN/',
    component: require.resolve(`./src/pages/index.js`),
    context: { lang: 'zh-CN' },
  })
}

И используйте это на странице:

export const query = graphql`
  query frontpageTeaser($lang: String) {
    contentfulFrontpage(node_locale: { eq: $lang }) {
      myArticalContent
    }
  } 
`

Но он всегда возвращает en. Пожалуйста, помогите :). Спасибо.

Answer 1

Это может быть сложный переключатель. Есть пример проекта, который без проблем сделал это с другой CMS + Gatsby, здесь .

Specifi c места, которые следует указать в базе кода:

• Конфигурация используемых вами локалей, здесь
• Dynami c ссылка в зависимости от активного языкового стандарта, здесь
• Контекст для всего вашего приложения, чтобы узнать, что такое активный языковой стандарт, здесь
• Фактически реализация поставщика контекста локали в компоненте более высокого порядка Layout, здесь
• Внутри gatsby-node.js также есть несколько магов c, которые обновляют то, что вы уже работали на! Вы можете найти это здесь .

Надеюсь, что это поможет :)

Answer 2

Прежде чем найти лучшее решение, это работает:

// @todo gatsby plugin https://www.gatsbyjs.org/packages/gatsby-plugin-react-i18next/
// this plugin provides current language `context.i18n.language`, which not know how to pass it to graphql page query.
// This snippet moves it one-level up to `context.locale`.
// @todo need to explore a better solution.
exports.onCreatePage = ({ page, actions }) => {
  const { createPage, deletePage } = actions

  if (!page.context.locale) {
    const language = page.context.i18n.language
    const locale = language === 'en' ? 'en-US' : language
    deletePage(page)

    createPage({
      ...page,
      context: {
        ...page.context,
        locale,
      }
    })
  }
}