Gatsby, gatsby-source-filesystem and how to filter by the 'name' configuration option in graphQL

Pere Sola - Jul 15 '21 -

Tutorial 4 of Gatsby v3 explains how to build a blog using markdown. It's all very well explained there: you need gatsby-source-filesystem, etc. What was not explained is how to use the name option in the gatsby-source-filesystem configuration option to filter results in the graphQL query. It's all explained in the gatsby-source-filesystem docs:

// In your gatsby-config.js
module.exports = {
  plugins: [
    // You can have multiple instances of this plugin
    // to read source nodes from different locations on your
    // filesystem.
    //
    // The following sets up the Jekyll pattern of having a
    // "pages" directory for Markdown files and a "data" directory
    // for `.json`, `.yaml`, `.csv`.
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/pages/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `${__dirname}/src/data/`,
        ignore: [`**/\.*`], // ignore files starting with a dot
      },
    },
  ],
}

{
  allFile(filter: { sourceInstanceName: { eq: "data" } }) {
    edges {
      node {
        extension
        dir
        modifiedTime
      }
    }
  }
}

That's it!