Запрос всех изображений в папке с помощью GraphQL
В настоящее время я изучаю 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
Спасибо за любую помощь!
Ответы 2
Вы можете выбрать определенные папки, используя фильтры в graphql.
Попробуйте что-то вроде этого:
query AssetsPhotos {
allFile(filter: {extension: {regex: "/(jpg)|(jpeg)|(png)/"}, relativeDirectory: {eq: "photos"}}) {
edges {
node {
id
name
}
}
}
}
Где eq: photos следует заменить на относительный результат каталога, который вы получаете для файлов, на которые хотите нацелить, когда вы переходите в GraphiQL и запускаете запрос на allFile.
Мне нравится использовать 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",
},
}
Затем вы можете напрямую адресовать их в своем запросе 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 сделать это за вас!
Это элегантное решение
Вы спасаете мне день, мужчины! Большое спасибо.