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.

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.