Gatsby: combining two graphql sources on a page (.json and .jpg sources) - json

Question

context
I am turning an old php ecommerce site into a static site built with gatsby.js.
I put all my product metadata into separate .json files (one per product) and I am able to load them with json and file transformer plugins. They are in /items. However each item is related to a set of standard images... eg item-01-main.jpg, item-01-placement.jpg, etc... I put all the images together in /itemphotosand followed the instructions here to load them into graphql: https://www.gatsbyjs.org/packages/gatsby-image/
question
On the page that loads all the products, i have no idea how to incorporate each one's item-xx-main.jpg image: I don't know what graphql query would fetch BOTH sets of data and match/merge them.:
/items
item-01.json
item-02.json
/itemphotos
item-01-main.jpg
item-01-placement.jpg
item-02-main.jpg
item-02-placement.jpg
I have a feeling my directory structure was the wrong approach and maybe I should store all the related images with my product json together in a folder:
/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
But then how do I source an items/ directory made up of item-xx/ subfolders holding both images and json, as representing a single entity, in graphql?
I did not go with markdown files because I wanted max UI flexibility.

Answer 1

Structure 2
Can you reference your images inside the .json? If so, the 2nd structure could be the winner, since you won't have to do much extra work:
// item-01.json
{
"meta": "...",
"main": "./item-01-main.jpg",
"placement": "./item-01-placement.jpg"
}
Query:
{
json {
id
main {
childImageSharp {
fixed {
src
}
}
}
}
}
Structure 1
If that's not possible or if you'd like to keep the 1st structure, you can try this query:
{
item: allFile(filter: { relativePath: { regex: "/item-01/" } }) {
nodes {
name
extension
children {
... on ImageSharp {
fixed {
src
}
}
... on Item01Json {
id
}
}
}
}
}
This will yield an array containing all files that share the same item id, regardless where they are stored. You can then use extension field to find the json & jpg nodes. It's not pretty, but it also doesn't require that much additional work.
None of the above
If none of that works for you, you could explore adding a image field to the json's graphql schema with createTypes and createResolvers. Add a type definition for the json via createTypes, then use createResolvers to locate the imageSharp node & resolve it.

Answer 2

A more clear cut example can be found from their code repo this page. This uses the same method as #Derek discussed. But if you want an example to understand more.