GraphQL 的多语言支持

Question

我正在尝试使用 GatsbyJS 静态站点生成器来重写我的站点。 用户可以通过 UI 更改语言。 具有本地化文本数据的文件夹很少：

- src - data - en - text1.json - text2.json ... - de - text1.json - text2.json ... - es - text1.json - text2.json ...

如何根据当前语言获取数据？ GraphQL 查询应该是什么样子？

Answer 1

您可以使用社区gatsby-plugin-i18n。

你可以找到一个使用 markdownRemark 配置的例子：

// Add to gatsby-config.js
plugins: [
  {
      resolve: 'gatsby-plugin-i18n',
      options: {        
        langKeyDefault: 'en',
        useLangKeyLayout: false,
        markdownRemark: {
          postPage: 'src/templates/blog-post.js',
          query: `
          {
            allMarkdownRemark {
                edges {
                  node {
                    fields {
                      slug,
                      langKey,
                    }
                  }
                }
             }
          }
          `
        }
      }
    }
]

您可能希望根据 langKey 值过滤您的 graphql 查询：

allMarkdownRemark(filter: { fields: { langKey: { eq: "en" } } }) {
  edges {
    node {
      fields {
        slug,
        langKey,
        #your data
      }
    }
  }
}

查看showcase 来源也可以帮助您。