使用GraphQL仅查询所选语言的标记页

盖茨比/GraphQL新手建立双语网站。我的网站（导航栏、页脚、正文内容等）分别在

en

和

zh

json文件中包含所有双语内容，并从

react-18next

调用

t

函数。然而，我的网站中有几个页面还没有“国际化”——我的降价页面。截至目前，文件结构如下所示：

src
├── posts
│   └── positions
│       ├── en
│       │   ├── accounting-en.md
│       │   ├── socialmedia-en.md
│       │   └── swe-en.md
│       └── zh
│           ├── accounting-zh.md
│           ├── socialmedia-zh.md
│           └── swe-zh.md

其中，

.md

文件通过

MDXRenderer

呈现在页面上，我只希望在选择任一语言时加载

en

/

zh

文件夹中的内容。我想让这些标记文件在Netlify CMS上可编辑，所以这和

react-markdown

不是我正在考虑的事情

所以我想知道：如何将来自

i18n.language

的数据传递到graphql查询中？这是将降价页面国际化的最佳方式吗

编辑：

gatsby node.js

const { createFilePath } = require(`gatsby-source-filesystem`);

exports.onCreateNode = ({ node, actions, getNode }) => {
    const { createNodeField } = actions

    if (node.internal.type === `Mdx`) {
        const value = createFilePath({ node, getNode })

        createNodeField({
            name: `slug`,
            node,
            value: `/posts${value}`,
            language,
        })
    }
}

const path = require("path")

exports.createPages = async ({ graphql, actions, reporter }) => { // Create blog pages dynamically
    const { createPage } = actions
    const result = await graphql(`
        query {
            allMdx {
                edges {
                    node {
                        id
                        fields {
                            slug
                            language
                        }
                    }
                }
            }
        }
    `)

    if (result.errors) {
        reporter.panicOnBuild('

so i was wondering: how can data from 
i18n.language
 be passed into a
graphql query? is this the best way to internationalise markdown
pages?


Yes, of course. To me, passing a GraphQL variable to the template it's the cleanest and best way. In that way, you can add a fallback language (or leave it empty) to pick the non-internationalized file if it's not translated yet.

Something like:

const path = require("path")
exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const queryResults = await graphql(`
    query getAllPosts {
      allMarkdownRemark {
        nodes {
          slug
          language #use relative/absolute path if needed
        }
      }
    }
  `)
  const postTemplate = path.resolve(`src/templates/posts.js`)

  queryResults.data.allProducts.nodes.forEach(node => {
    createPage({
      path: `/blog/${node.slug}`,
      component: postTemplate,
      context: {
        slug: node.slug,
        language: node.language || 'en' // the fallback
      },
    })
  })
}

const{createFilePath}=require（`gatsby source filesystem`）；
exports.onCreateNode=（{node，actions，getNode}）=>{
const{createNodeField}=操作
if（node.internal.type==`Mdx`）{
const value=createFilePath（{node，getNode}）
createNodeField({
名称：`slug`，
节点，
值：`/posts${value}`，
语言，
})
}
}
const path=require（“路径”）
exports.createPages=async（{graphql，actions，reporter}）=>{//动态创建博客页面
const{createPage}=actions
常量结果=等待图形ql(`
质疑{
allMdx{
边缘{
节点{
身份证件
田地{
鼻涕虫
语言
}
}
}
}
}
`)
if（result.errors）{
记者：panicOnBuild（'
所以我想知道：如何将来自
i18n.language
的数据传递到
graphql查询？这是国际化降价的最佳方式吗
页面

是的，当然。对我来说，将GraphQL变量传递给模板是最干净、最好的方法。这样，如果尚未翻译，您可以添加回退语言（或将其保留为空）来选择非国际化文件

比如：

注意：在不知道您的
gatsby node.js
看起来如何的情况下，您可能需要对查询和
createPage
API进行一些调整

其思想是查询
语言
字段，我假设它是每个帖子的一个字段。如果不是，您可以查询文件路径（相对或绝对），它将在其名称中包含
en
或
zh
变量。添加回退语言将强制您更改所有文件名以发送有效变量

然后，在模板中（
posts.js
）您可以使用
language
字段，就像使用
slug
来过滤每个实体一样。
谢谢！这真的很有帮助。查询
language
字段是一个非常优雅的解决方案-但是，我在将语言作为字段添加到我的frontmatter并将
i18next.language
的输出传递到我的qu时遇到了问题在
posts.js
中，我已经编辑了我的帖子，包括我的
gatsby node.js
和
posts.js
，你认为你可以看一下吗？还有，
node.slug
，
node.language
从库调用？
slug
和
语言来自MDX的前端。你应该在那里添加新的fieldi设法让它工作，但字符串插值不起作用（好吧，数据是在运行时提取的，但查询+页面是在构建时编译的）-我将
i18next.language
传递到
onCreatePage
API，并为每种语言创建了一个
en
/
zh
页面。这是您的想法还是有一个更优雅的解决方案？这正是我的意思。避免构建时间会迫使您调整Gatsby的默认行为，因此，对我来说，这是最简单的方法迄今为止的甘特解决方案。