CODEWITHSUNDEEP
graphqlgatsby
Kuba Chmiel
Kuba Chmiel

Reputation: 69

Is it possible to create a GraphQL subquery to create an array as an element of a markdownRemark?

I'm making a webpage for a language school and am now trying to create pages about languages taught there. They're supposed to include the name of the language, a short descroption and a list of schedule items related to them. In Netlify CMS I made 2 collections for them. One of them has the general language information and the other one includes the schedule items.

What I would like to do when I enter a language's webpage is get the general infromation from the language_pages collection and an array of schedule_items with the same value in the language field, but I'm kind of scratching my head trying to figure out how to do it.

Each of the 2 collections includes a templateKey field, which differentiates between the collections. The values are language-post for general language information and schedule-item for schedule items.

My basic query to get a single language page is the following:

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

The field language also exists in the schedule item collection, so I'm thinking I should somehow use it to filter through the collection. I'm a complete graphQL noob, however and I haven't really found and example of what I'm trying to do here being done. My complete bodge-job resulted in something like this:

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

    }
    children {
      id
      group
      room
      time
    }
  }
}

Which doesn't even execute properly and I'm honestly out of ideas how I could make it work.

Upvotes: 2

Views: 1629

Answers (1)

Derek Nguyen
Derek Nguyen

Reputation: 11577

You can do 2 queries side by side & filter by folder name with regex:

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 could be a variable you pass into createPage action when you create page programmatically. You can then use it in your page template's query. Example from the doc in case you need it:
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 are alias name that make it easier to retrieve your data. You can access the data like data.languagePage... & data.scheduledItem...

Let me know if that helps.

Upvotes: 3

Related Questions