Gatsby - 如何使用 GraphQL 查询 src/data/ 子文件夹中的所有 YAML

Posted 2023-03-08

【中文标题】Gatsby - 如何使用 GraphQL 查询 src/data/ 子文件夹中的所有 YAML

【英文标题】：Gatsby - How to query for all YAML in a subfolder of src/data/ using GraphQL

【发布时间】：2021-11-25 09:25:32

【问题描述】：

我正在尝试在我的数据文件夹的子文件夹中查询所有 YAML 文件。我正在使用gatsby-transformer-yaml 来解析 YAML 数据。我的文件树看起来像这样：

content/
    posts/
        book1.md
        book2.md
src/
    data/
        books/
            quotes1.yaml
            quotes2.yaml 
    templates/
        booknote.tsx

根据documentation，我应该能够进行一个名为allBooksYaml 的查询，它将返回quote1.yaml 和quote2.yaml 中的所有引号。但是，当我查看 GraphiQL 操场时，我可以进行的唯一查询是 allQuote1Yaml 和 allQuote2Yaml。 (1) 这是一个错误吗？还是我的设置有问题？

我想这样做的原因是，我可以过滤带有书名的allBooksYaml 的结果，并为使用booknote.tsx 模板生成的每个页面显示正确的引号。如果我不这样做，我想我将不得不为我想要创建的每个书注帖子手动进行单独的页面/GraphQL 查询。 (2) 有没有更好的方法来链接 YAML 文件和 Markdown/Page 组件中的数据？

提前致谢！

【参考方案1】：

根据plugin's documentation，给出：

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

源文件夹$__dirname/src/data/ 包含.yaml 文件。

请记住，您可以构建文件夹以生成数组或单个对象：

对象数组：每个文件代表一个集合。 （你可能想要这个） 单个对象：每个子文件夹代表一个集合；每个文件代表一个“记录”。

因此，如果您的路径是 ./src/data/books，您应该能够查询所有书籍，但这将为所有书籍（单个对象）生成一个特定节点。

对于第二个问题，我认为最好的最佳解决方案是使用gatsby-node.js 动态生成页面，在那里查询所有降价书籍，通过上下文将标题（或另一个唯一字段）发送到模板并在那里过滤每本书，因此您的报价将需要包含一个带有与该书匹配的标识符的字段，主要是您所说的，但没有手动方法。同时，这或多或少是一种博客方法。

进一步参考：https://www.gatsbyjs.com/docs/creating-and-modifying-pages/

【参考方案2】：

您应该能够通过使用以下配置来做到这一点：

"gatsby-transformer-yaml",

  resolve: "gatsby-source-filesystem",
  options: 
    path: `$__dirname/src/data`,
  ,
,
"gatsby-transformer-yaml",

  resolve: "gatsby-source-filesystem",
  options: 
  path: `$__dirname/content`,
  ,
,