Question

我目前正在学习Gatsby.js和GraphQL作为补充技术，并陷入查询的困境。我想查询一个文件夹中的所有图像，将它们映射成槽并将它们显示在网格中的react组件中。我正在使用gatsby-source-filesystem，但无法弄清楚如何专门处理该文件夹并从中获取所有图像。

我为源文件系统设置的插件如下所示。

{
  resolve: `gatsby-source-filesystem`,
  options: {
    path: `${__dirname}/src/posts`,
    name: 'posts',
  },
},
{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `images`,
    path: `${__dirname}/src/assets/images`,
  },
},
{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `photos`,
    path: `${__dirname}/src/assets/photos`,
  },
},

我的图像保存在src / assets / photos

感谢您的帮助！

Answer 1

您可以使用graphql中的过滤器选择特定文件夹。

尝试这样的事情：

query AssetsPhotos {
  allFile(filter: {extension: {regex: "/(jpg)|(jpeg)|(png)/"}, relativeDirectory: {eq: "photos"}}) {
    edges {
      node {
        id
        name
      }
    }
  }
}

将eq: photos更改为相对目录结果的位置，该结果是您访问GraphiQL并在allFile上运行查询时要定位的文件的结果。

Answer 2

我喜欢使用plugin docs中所述的sourceInstanceName插件时使用gatsby-source-filesystem。

您的gatsby-config.js

{
  resolve: "gatsby-source-filesystem",
  options: {
    path: `${__dirname}/content/legal`,
    name: "legal", // IMPORTANT: the name of your source instance
  },
}, {
  resolve: "gatsby-source-filesystem",
  options: {
    path: `${__dirname}/content/blog`,
    name: "blog",
  },
}

然后，您可以使用filter和sourceInstanceName在GraphQL查询中直接解决它们：

export const query = graphql`
{
  allFile(filter: {
      extension: {eq: "png"},
      sourceInstanceName: {eq: "blog"}
    })
  {
    edges {
      node {
      childImageSharp {
          fluid(maxWidth: 300, quality: 50) {
            originalName
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  }
}

与relativeDirectory相比，这种方式无需处理相对路径的更改，您可以重构项目或其他任何东西。只需让GraphQL为您处理！

使用GraphQL

2 个答案: