Gatsby:使用GraphQL查询从存储在json中的路径获取所有图像

Question

上下文

我正试着做一个画廊。它应该显示来自不同场合的图片，比如博客。

为此，我有一个JSON文件，其中存储了所有帖子(标题、段塞、日期和图像-文件夹路径)。为了显示它们，我使用了GraphQL。

问题

我现在的问题是显示每个帖子的所有图片。在JSON文件中，只存储到图像的路径。

JSON结构：

[
 {
  "title": "Gallery 1",
  "slug": "gallery-1",
  "date": "02.01.2022",
  "images": "./gallery-1/"
 },
 {
  "title": "Gallery 2",
  "slug": "gallery-2",
  "date": "15.01.2022",
  "images": "./gallery-2/"
 }
]

现在，对于图片库1，，我想获取存储在./-1/文件夹中的所有图像，等等。

query MyQuery {
  allGalleriesJson {
    edges {
      node {
        title
        slug
        date
        images
      }
    }
  }
}

当我运行这个GraphQL命令时，我会得到路径的字符串。但是现在我想用这个字符串获取文件夹中的所有图像。我怎样才能做到这一点？

Answer 1

我认为您希望使用filter过滤器(相当冗余)来获取/gallery-1/ (或每个图库)文件夹中的所有图像。

要做到这一点，只需使用context函数中可用的createPage，为模板提供一个上下文变量。

createPage({
  path: node.slug,
  component: path.resolve(`./src/templates/your-template-file.js`),
  context: {
    slug: node.slug,
  },
})

注意:这是一个抽象，因为没有提供样板。根据您的意愿对其进行调整，但要为每个图库对象传递一个slug。

之后，在模板(your-template-file.js)中，需要使用提供的slug (每个页面不同)筛选查询

export const query = graphql`
  query TemplateQuery($slug: String!) {
    allGalleriesJson(filter: {fileAbsolutePath: {eq: $slug  }}) {
      edges {
        node {
          title
          slug
          date
          images
        }
      }
    }

注意：allGalleriesJson可能不同，或者您可能有可用的galleriesJson。如果是这样的话，使用它，指出一个特定的节点比所有这些节点的性能都要高

这里我使用的是eq (相等)过滤器，但是您有一堆可用的：https://www.gatsbyjs.com/docs/query-filters/

同样，您可以使用绝对路径(fileAbsolutePath)或相对路径。在GraphiQL操场(localhost:8000/___graphql)中测试您的查询。

尽管查询或片段可能与此示例不同，但请了解以下内容：

• 为每个JSON对象位置创建页面(gatsby-node.js + slug变量通过上下文
• 进入模板)使用上下文过滤allGalleriesJson以获取文件夹图像