Gatsby：在页面上合并两个GraphQL数据源（.json和.jpg数据源）

Question

Gatsby：在页面上合并两个GraphQL数据源（.json和.jpg数据源）

4

背景

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

我将所有商品元数据放入单独的.json文件中（每个商品一个），并能够使用json和文件转换器插件加载它们。这些文件位于/items目录下。然而，每个商品都与一组标准图片相关...例如item-01-main.jpg、item-01-placement.jpg等。我将所有图片放在/itemphotos目录下，并按照此处的说明将其加载到graphql中。

问题

在加载所有产品的页面上，我不知道如何合并每个产品的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中将由包含图像和json的item-xx/子文件夹组成的items/目录视为单个实体进行数据源处理呢？

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

- yen

2个回答

1

一个更为明显的例子可以在他们的代码库this page中找到。这使用了与@Derek讨论的相同方法。但如果您想要一个更好的例子来理解。

- FAntony

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Derek Nguyen · Accepted Answer

第二种结构

您是否可以在.json文件中引用您的图像？如果可以，第二种结构可能是最佳选择，因为您不需要进行太多额外的工作：

// item-01.json

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

Query:

{
  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 和 createResolvers 将图像字段添加到JSON的GraphQL模式中。通过createTypes添加JSON的类型定义，然后使用createResolvers定位并解决imageSharp节点。