Gatsby: combining two graphql sources on a page (.json and .jpg sources)
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.