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

Question

我目前正在学习Gatsby.js和GraphQL作为一项补充技术，但在查询方面遇到了困难。我想查询文件夹中的所有图像，通过它们进行映射，并将它们作为网格显示在react组件中。我正在使用gatsby源文件系统，但不知道如何具体寻址该文件夹并从中获取所有图像

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

{
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/photes 中有我的图像

谢谢你的帮助！

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

我喜欢在使用插件文档中所述的gatsby-source-filesystem插件时使用sourceInstanceName。

您的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为您处理它！