使用 Graphql 和 gatsby-source-filesystem 查询文件夹

Question

编辑

我想我没有弄清楚我的问题。

问题是 sourceInstanceName 正在 return 问题中显示的空数组，即使该文件夹包含内容和 .md 文件。

大家好，我在使用 graphql 查询文件夹时遇到了问题。

你看我有这个文件结构：

/content/posts/Journeys/{FILENAME}.{EXTENSION}
/content/posts/Blog/{FILENAME}.{EXTENSION}

我想查询 文件夹名称（又名旅程或博客）而不是内容。

我可以用这个查询：

query test2 {
  journeys: allFile(filter: {sourceInstanceName: {eq: "posts"}}) {
    edges {
      node {
        dir
        name
        relativePath
        relativeDirectory
      }
    }
  }
}

这是 return 这个，return 不需要的文件，因为我只想要文件夹名称或目录：

{
  "data": {
    "journeys": {
      "edges": [
        {
          "node": {
            "dir": "D:/Side-projects/salomonpina.dev/content",
            "name": ".git",
            "relativePath": ".git",
            "relativeDirectory": ""
          }
        },
        {
          "node": {
            "dir": "D:/Side-projects/salomonpina.dev/content/icons/png",
            "name": "github-icon_512",
            "relativePath": "icons/png/github-icon_512.png",
            "relativeDirectory": "icons/png"
          }
        },

more info down...

它也适用于资产

但是当我把(filter: {sourceInstanceName: {eq: "posts"}})改成(filter: {sourceInstanceName: {eq: "journeys"}})

它return是一个空数组：

{
  "data": {
    "journeys": {
      "edges": []
    }
  }
}

尽管它使用了正确的名称，但来自 gatsby-source-filesystem 的名称。

这是我在 gatsby-config.js 和 gatsby-source-filesystem 中所做的。

{
      resolve: "gatsby-source-filesystem",
      options: {
        name: "posts",
        path: `${__dirname}/content/`,
      },
    },

    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "assets",
        path: `${__dirname}/static/`,
      },
    },

    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "journeys",
        path: `${__dirname}/content/posts/Journeys/`,
      },
    },

我试过但似乎没有帮助。

如有任何帮助，我们将不胜感激。

Answer 1

缺少有关文件数据类型（扩展名）的信息，这些信息会影响您收集 post 信息的方式。一旦获得直接访问内容本身的 sourceInstanceName 权限，您需要做什么。假设你有一个降价结构，这将是 childMarkdownRemark，所以这应该有效：

{
  allFile(filter: {sourceInstanceName: {eq: "journeys"}}) {
    edges {
      node {
        sourceInstanceName
        childMarkdownRemark {
          frontmatter {
            slug
          }
        }
      }
    }
  }
}

注意：由于 childMarkdownRemark 对象，您的嵌套结构可能与我的不同。检查 localhost:8000/___graphql 游乐场，看看哪个是您的查询对象。

此外，我认为您的博客文件夹 gatsby-node.js 中缺少一个文件系统：

{
  resolve: "gatsby-source-filesystem",
  options: {
    name: "blog",
    path: `${__dirname}/content/posts/Blog/`,
  },
},

如果您未从查询中检索到任何值，请删除 filter 以检查每个 post 的 sourceInstanceName 是什么（检查它们是否已正确设置或由于打字错误，过滤器不起作用）。在 localhost:8000/___graphql 游乐场查看它们。

我不知道您的要求或规格，但是，也许在您的 post GraphQL 架构中添加另一个字段也适合您，比方说 category（journey 或 blog) 作为一个想法对你来说是有效的并且更具可扩展性。

使用 Graphql 和 gatsby-source-filesystem 查询文件夹

Query folder usign Graphql and gatsby-source-filesystem

filesystems

graphql

gatsby

编辑