如何使用graphQL从gats中的多个目录（文件系统）中获取数据

Question

我有一个这样的目录

我有 posts 文件夹，其中可能包含许多文件夹，然后每个视频文件夹可能包含一些视频。 现在，我已经使用this为video and video_2文件夹创建了动态页面。 我现在有两个页面，我想要的是仅在我的模板页面中获取该目录的特定两个视频。 我的graphQL应该是什么？

引用：（用于.md文件中的特定内容）

query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
      }
    }
  }
`;

这会将特定的按段数据导入网页。从文件系统中获取内容的查询应该是什么？（我正在使用gatsby-source-filesystem）。

希望我的问题有道理。谢谢。

Answer 1

所以您要说的是，您有一组目录，每个目录都应被转换为一个页面。每个页面应显示目录中的视频。

您可以在gatsby-node中执行以下操作；检索所有文件，将它们按目录分组并为每个目录创建页面。

请注意查询中的正则表达式，用于选择您感兴趣的文件。

createPage调用将页面的文件名视频作为上下文发送，因此您可能不需要在页面中进行任何进一步的GraphQL查询。

另请参阅https://www.gatsbyjs.org/docs/creating-and-modifying-pages/

const path = require("path")

function getDirectoryOfFile(pathName) {
  const pathEls = pathName.split(path.sep)

  return pathEls[pathEls.length - 2]
}

function groupFilesByDirectory(files) {
  return files.reduce((directories, file) => {
    const directory = getDirectoryOfFile(file)

    directories[directory] = (directories[directory] || []).concat([file])

    return directories
  }, {})
}

exports.createPages = async function ({ actions, graphql }) {
  const { data } = await graphql(`
    query {
      allFile(filter: { absolutePath: { regex: "/video/" } }) {
        edges {
          node {
            name
            absolutePath
          }
        }
      }
    }
  `)

  const files = data.allFile.edges.map(edge => edge.node.absolutePath)
  const directories = groupFilesByDirectory(files)

  Object.entries(directories).forEach(([directory, videos]) => {
    actions.createPage({
      path: `/video/${directory}`,
      component: require.resolve(/* your page template here */),
      context: { videos },
    })
  })
}

希望我能正确理解你的问题。