Question

我正在为一所语言学校制作一个网页，现在正在尝试创建有关在那里所教语言的页面。它们应该包括语言名称，简短的简短描述以及与它们相关的计划项目列表。在Netlify CMS中，我为它们制作了2个收藏集。其中一个具有一般语言信息，另一个具有计划项目。

当我进入一种语言的网页时，我想做的是从language_pages集合中获取一般信息，并在schedule_items字段中获取具有相同值的language数组，但是我有点想弄清楚该怎么做。

2个集合中的每个集合都包含一个templateKey字段，该字段在两个集合之间进行区分。对于常规语言信息，值为language-post；对于计划项目，值为schedule-item。

我要获取一种语言页面的基本查询如下：

query {
 markdownRemark(frontmatter: { language: { eq: "Niemiecki" }}) {
  html
    frontmatter {
      language
      description
    }
  }
}

计划项目集合中也存在该领域的语言，所以我认为我应该以某种方式使用它来过滤整个集合。我是一个完整的graphQL新手，但是我还没有真正找到我正在尝试做的示例。我完成了全部任务，结果是这样的：

 query {
  markdownRemark(frontmatter: { language: { eq: "Niemiecki" }}) {
    html
    frontmatter {
      language
      description

    }
    children {
      id
      group
      room
      time
    }
  }
}

什至无法正确执行，我实在不知道如何使它工作。

Answer 1

您可以并排进行2个查询，并使用正则表达式按文件夹名称进行过滤：

query LanguageInfo($lang: String) {
  languagePage: markdownRemark(
    frontmatter: { language: { eq: $lang }},
    fileAbsolutePath: {
        regex: "/your-language-folder-name/"
      }
  ) {
    frontmatter { ... }
  }

  scheduledItem: markdownRemark(
    frontmatter: { language: { eq: $lang }},
    fileAbsolutePath: {
        regex: "/your-schedule-folder-name/"
      }
  ) {
    frontmatter { ... }
  }
}

lang可能是您以编程方式创建页面时传递给createPage操作的变量。然后，您可以在页面模板的查询中使用它。 the doc中的示例（如果需要）：

createPage({
  path: `/my-sweet-new-page/`,
  component: path.resolve(`./src/templates/my-sweet-new-page.js`),
  // The context is passed as props to the component as well
  // as into the component's GraphQL query.
  context: {
    lang: `english`,
  },
})

languagePage和scheduledItem是别名，可以更轻松地检索数据。您可以访问data.languagePage...和data.scheduledItem...

让我知道是否有帮助。

是否可以创建GraphQL子查询以将数组创建为markdownRemark的元素？

1 个答案: