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

Question

上下文

我正在尝试制作画廊。它应该像博客一样显示来自不同场合的图像。

为此，我有一个 JSON 文件，其中存储了所有 post（标题、别名、日期和 images-folder-path）。为了显示它们，我正在使用 GraphQL。

问题

我现在的问题是显示各个 post 的所有图像。在 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/"
 }
]

现在 Gallery 1 我想获取存储在 ./gallery-1/ 文件夹中的所有图像等等.

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

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

Answer 1

我认为您想使用 filter 过滤器（非常多余）来获取 /gallery-1/（或每个图库）文件夹中的所有图像。

为此，您只需使用 createPage 函数中可用的 context 为模板提供上下文变量。

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 playground (localhost:8000/___graphql) 中测试您的查询。

尽管查询或代码片段可能与此示例不同，但请理解：

为每个 JSON 对象位置创建页面 (gatsby-node.js + createPage)
通过上下文将slug变量传递到模板中
使用上下文过滤 allGalleriesJson 以获取您的文件夹图像

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

Gatsby: Get all images with GraphQL query from a path stored in a json

javascript

reactjs

graphql

gatsby

上下文

问题