reactjs – Gatsby – How to query for all YAML in a subfolder of src/data/ using GraphQL

According to the plugin’s documentation, given:

module.exports = {
  plugins: [
    `gatsby-transformer-yaml`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/data/`,
      },
    },
  ],
} 

Where the source folder ${__dirname}/src/data/ contains the .yaml files.

Having in mind also, that you can structure your folder to generate an array or a single object:

  • Array of Objects: Where each file represents a collection. (you probably want this one)
  • Single Object: Where each subfolder represents a collection; each file represents one “record”.

So, if your path is ./src/data/books you should be able to query for all books, but this will generate a specific node for all books (single object).

For the second question, I think the best optimal solution is to generate dynamically the pages using gatsby-node.js, querying all markdown books and there, send the title (or another unique field) to the template via context and filter there for each specific book, so your quotes will need to contain a field with an identifier that will match the book, mostly what you said but without the manual approach. Which, at the same time, is more or less a blog approach.

Further reference: www.gatsbyjs.com/docs/creating-and-modifying-pages/

Read more here: Source link