Graphql 盖茨比：从contentful动态加载i18n内容

我们有一个静态网站使用盖茨比和满足。现在，我们希望支持多语言，并从contentful获得本地化内容。我能够填充graghql查询：

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

如果更改为

node\u locale:{eq:“en-US”}

，此查询可以从contentful和英语加载中文内容

现在的问题是：我们希望支持语言切换，以便在切换语言时，graphql加载相应的本地化内容

我们正在使用，它具有以下伟大的功能：

在单个页面组件中支持多语言url路由。您不必创建单独的页面，如pages/en/index.js或pages/es/index.js

像这样的页面确实可以从本地

/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

。请帮忙：）。谢谢。

这可能是一个复杂的开关。有一个例子项目已经顺利地完成了另一个CMS+Gatsby

代码库中要指出的具体位置：

• 配置您使用的区域设置
• 取决于活动区域设置的动态链接
• 整个应用程序了解活动区域设置的上下文
• 在高阶组件

  布局中实际实现区域设置上下文提供程序

• 在

  gatsby node.js

  中还有一些神奇的功能，可以更新您已经在做的工作！你可以找到

---

希望有帮助：）

在获得更好的解决方案之前，此解决方案有效：

// @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,
      }
    })
  }
}

---

不是这个用例，请尝试其他i18next插件，搜索教程