Блог

Я создаю веб-страницу для языковой школы и сейчас пытаюсь создать страницы о языках, которые там преподаются. Предполагается, что они должны включать название языка, краткое описание и список связанных с ними элементов расписания. В Netlify CMS я создал для них 2 коллекции. Один из них содержит общую информацию о языке, а другой включает элементы расписания.

Что я хотел бы сделать, когда захожу на веб-страницу языка, так это получить общую информацию из language_pages коллекции и массив schedule_items с тем же значением в language поле, но я немного ломаю голову, пытаясь понять, как это сделать.

Каждая из двух коллекций включает в себя 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
    }
  }
}
  

Который даже не выполняется должным образом, и, честно говоря, у меня нет идей, как я мог бы заставить его работать.

Вы можете выполнять 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 действие при программном создании страницы. Затем вы можете использовать его в запросе шаблона вашей страницы. Пример из документа на случай, если он вам понадобится:

 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 amp; scheduledItem — это псевдоним, который упрощает извлечение ваших данных. Вы можете получить доступ к данным следующим образом data.languagePage... amp; data.scheduledItem...

Дайте мне знать, если это поможет.