上下文

Question

上下文

我正在将一个旧的php电子商务网站变成一个使用gatsby.js构建的静态网站。

我将所有产品元数据放入单独的.json文件（每个产品一个），并能够使用json和文件转换器插件加载它们。它们位于/items中。但是，每个项目都与一组标准图像相关，例如item-01-main.jpg，item-01-placement.jpg等...我将所有图像放到/itemphotos中，并按照此处的说明进行加载将它们放入graphql：https://www.gatsbyjs.org/packages/gatsby-image/

问题

在加载所有产品的页面上，我不知道如何合并每个人的item-xx-main.jpg图片：我不知道哪个graphql查询将获取两组数据并进行匹配/合并：

。

/items
  item-01.json
  item-02.json
/itemphotos
  item-01-main.jpg
  item-01-placement.jpg
  item-02-main.jpg
  item-02-placement.jpg

我觉得目录结构是错误的方法，也许我应该将所有与产品json相关的图像一起存储在一个文件夹中：

/items
  item-01/
    item-01.json
    item-01-main.jpg
    item-01-placement.jpg
  item-02/
    item-02.json
    item-02-main.jpg
    item-02-placement.jpg

但是然后如何在graphql中获取由items/子文件夹组成的item-xx/目录，这些子文件夹同时包含图像和json（代表单个实体）？

我没有使用markdown文件，因为我想要最大的UI灵活性。

Answer 1

结构2

您可以在.json内引用图像吗？如果是这样，那么第二结构可能是赢家，因为您不必做很多额外的工作：

// item-01.json

{
  "meta": "...",
  "main": "./item-01-main.jpg",
  "placement": "./item-01-placement.jpg"
}

查询：

{
  json {
    id
    main {
      childImageSharp {
        fixed {
          src
        }
      }
    }
  }
}

结构1

如果这不可能，或者您希望保留第一种结构，则可以尝试以下查询：

{
  item: allFile(filter: { relativePath: { regex: "/item-01/" } }) {
    nodes {
      name
      extension
      children {
        ... on ImageSharp {
          fixed {
            src
          }
        }
        ... on Item01Json {
          id
        }
      }
    }
  }
}

这将产生一个数组，其中包含所有共享相同项目ID的文件，无论它们存储在何处。然后，您可以使用extension字段来找到json和jpg节点。它虽然不漂亮，但也不需要太多额外的工作。

以上都不是

如果这些都不适合您，您可以尝试使用createTypes and createResolvers将图像字段添加到json的graphql模式中。通过createTypes为json添加类型定义，然后使用createResolvers定位imageSharp节点并对其进行解析。

Answer 2

可以从其代码仓库this page中找到更清晰的示例。这使用与@Derek讨论的方法相同的方法。但是，如果您想让示例更多地了解。只要检查一下是否感到困惑（我曾经）。

盖茨比：在页面上组合两个graphql源（.json和.jpg源）

上下文

问题

2 个答案:

结构2

结构1

以上都不是