Gatsby:在页面上组合两个 graphql 源(.json 和 .jpg 源)
Posted
技术标签:
【中文标题】Gatsby:在页面上组合两个 graphql 源(.json 和 .jpg 源)【英文标题】:Gatsby: combining two graphql sources on a page (.json and .jpg sources) 【发布时间】:2019-09-26 00:14:57 【问题描述】:上下文
我正在将一个旧的 php 电子商务网站变成一个使用 gatsby.js 构建的静态网站。
我将所有产品元数据放入单独的 .json 文件中(每个产品一个),我可以使用 json 和文件转换器插件加载它们。他们在/items
。然而,每个项目都与一组标准图像相关......例如item-01-main.jpg
、item-01-placement.jpg
等......我将所有图像放在/itemphotos
中,并按照此处的说明将它们加载到graphql中:@987654321 @
问题
在加载所有产品的页面上,我不知道如何合并每个人的 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 中获取由item-xx/
子文件夹组成的items/
目录,其中包含图像和json,作为表示单个实体,在graphql 中?
我没有使用降价文件,因为我想要最大的 UI 灵活性。
【问题讨论】:
【参考方案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
节点并解析。
【讨论】:
哦哇...我真的很喜欢你的结构 2 响应!我还没有机会尝试...我希望尽快选择这个答案! 好的,终于试过了......它有效!我对allFile(filter: sourceInstanceName: eq: "products" )
有了更进一步的了解,因为我想提取所有产品......谢谢!!!【参考方案2】:
可以从他们的代码库this page 中找到更清晰的示例。这使用与@Derek 讨论的相同方法。但是如果你想通过一个例子来了解更多。
【讨论】:
以上是关于Gatsby:在页面上组合两个 graphql 源(.json 和 .jpg 源)的主要内容,如果未能解决你的问题,请参考以下文章
Gatsby 源插件仅显示 GraphQL 中数组中的最后一项
源 GraphQL API:HTTP 错误 400 错误请求
如何在 graphQL 中获取 Gatsby 页面 HTML