使用 GraphQL 查询文件夹中的所有图像答案

【问题标题】：Querying all images in folder using GraphQL使用 GraphQL 查询文件夹中的所有图像
【发布时间】：2018-12-23 06:59:53
【问题描述】：

我目前正在学习 Gatsby.js 和 GraphQL 作为补充技术，但被查询卡住了。我想查询文件夹中的所有图像，映射它们并将它们作为网格显示在反应组件中。我正在使用 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 中

感谢您的帮助！

【问题讨论】：

标签： reactjs graphql gatsby

【解决方案1】：

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

试试这样的：

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

当您转到 GraphiQL 并在 allFile 上运行查询时，应将 eq: photos 更改为您要定位的文件的相对目录结果。

【讨论】：

你救了我的天！非常感谢。

【解决方案2】：

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

你的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",
  },
}

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

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

与relativeDirectory 相比，这种方式您永远不必处理更改的相对路径，您可能会重构您的项目或其他任何东西。让 GraphQL 为您处理！

【讨论】：

这是一个优雅的解决方案